Home >Web Front-end >HTML Tutorial >Use CSS to set a background image. The image is relatively large. How can it be completely displayed in a DIV? _html/css_WEB-ITnose
Use CSS to set a background image. The image is relatively large. How can it be completely displayed in a DIV? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:12:151476browse
It means that the image is 500*500, and the DIV is 100*100. So how to set it as the background image and display the entire content of the image?
I wrote it like this in JS:
b.style.backgroundImage="url('1.jpg')";
b.style.width="100px" ;
b.style.height="100px";
The image can be displayed, but not completely, indicating that the height and width set above have no effect
How to write this?
Reply to discussion (solution)
b.style.backgroundRepeat="repeat";
This requires image stretching . . .
Reference:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>?</title><style type="text/css">.divBox { width:100px; height:100px; border:solid 1px red; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flashbutton.gif' ,sizingMethod= 'scale' ); background-repeat: no-repeat; background-positon: 100%, 100%; }</style></head> <body><div class="divBox">test...</div></body></html> Just use Format Factory to convert the image to 100*100, and then write it into the div
Set the css style of the image.
width: 100px;
height: 100px;
No matter how big the image is, it will be displayed according to this size. If the image is smaller than this size, it will be enlarged; if it is larger than this size, it will be reduced.
This requires image stretching. . .
Reference:
HTML code
8b62274b0d807b185c80af600f8cf412
This is for background images. Setting the height and width of the image is useless.
It is only useful for the second floor. However, my page only needs to support the WEBKIT browser. However, this method does not work, only IE supports it. Is there any function of CSS3 that can be used?
OK, thank you guys. :url(1.jpg);
-webkit-background-size: 100px 60px;