Home > Web Front-end > HTML Tutorial > Background image control problem in DIV, thank you_html/css_WEB-ITnose

Background image control problem in DIV, thank you_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:22:12
Original
957 people have browsed it

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);	}
Copy after login



                                           > 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

document.getelementById("#id").style.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>
Copy after login

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')     } 
Copy after login


1. There are many ways to create a background, such as z-index

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template