Home > Article > Web Front-end > Background image control problem in DIV, thank you_html/css_WEB-ITnose
Background image control problem in DIV, thank you_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:22:12936browse
My DIV is displayed in the center. I want the background image in the DIV to be the same width and height as the DIV. How to achieve this? The width of the current image has exceeded the width of the DIV. Thank you
.middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; background-repeat:no-repeat; background-image:url(image/login/loginpic.png); } e3e064e88e8ed0f70bf83e1a50899d49
> The width of the image has exceeded the width of the DIV, then set the width of the image
document.getelementById ("#id").style.width Assign the width of the div to the width of the image
The width of the image has exceeded the width of the DIV, then set the width of the image
document.getelementById ("#id").style.width Assign the width of the div to the width of the image
Can you tell me how to set the width of the image? I did not use the img tag
The width of the image has exceeded the width of the DIV, then set the image The width
Assign the width of the div to the width of the image
<!doctype html><html><head><meta charset="utf-8" /><style>*{ margin:0; padding:0;}#middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; postion:relative;}#bg{ width:500px; height:200px; position:absolute; z-index:-1;}</style></head><body><div id="middleimg"> <img id="bg" src="image/wallpaper-1542283.jpg" /> 哇咔咔咔我是一个登录框！</div></body></html> Can you tell me how to set the width of the image? I have no use. The width and height of the img tag should not be set for the background image, and setting the xy coordinates should not be your original intention.
Just use img positioning combined with z-index to simulate a background image with the same size as the div.
Only applicable to IE,
If the author wants to be compatible with other browsers, just use two layers.
.middleimg{ margin:0 auto; width:500px; height:200px; border: 1px solid #eee; background-repeat:no-repeat; filter:progid:dximagetransform.microsoft.alphaimageloader(src='image/login/loginpic.png',sizingmethod='scale') } 1. There are many ways to create a background, such as z-index