Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to set the background picture in CSS compatible with IE6. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

CSS compatibility: an IE6 BUG that repeats the background image in the case of no-repeat

The setting of background image is a commonly used attribute in CSS layout. Apply url of background and introduce background image, which can be set to not repeat tiling, as shown in the following code:

Background:url (https://cache.yisu.com/upload/information/20210521/366/487226.png)no-repeat;

◆ in most cases, there will be no problem with this setting. The background picture is rendered as set and is not tiled on the container, regardless of the width and height of the container. However, under IE6, if the width and height are not defined, it will result in a BUG that repeats the background picture even if the no-repeat is defined.

Run the following code in IE6:

SourceCodetoRun

CSS compatibility problem: an IE6 still repeats the background image BUG-www.52css.com # bigbox {background:url (https://cache.yisu.com/upload/information/20210521/366/487226.png)no-repeat;} # smallbox {height:75px;} / * support bigbox*/ # marginbox {margin-top:-20px;} / * up margin box*/ in the case of no-repeat)

The ◆ solution is simple: define the width of the container. If there is no actual width, it can be defined as 100%. This BUG does not require additional HACK, just be careful to avoid it when using it. The resolved code is as follows, which is run in IE6:

SourceCodetoRun

CSS compatibility issue: an IE6 still repeats the BUG-www.52css.com # bigbox {width:100%;background:url (https://cache.yisu.com/upload/information/20210521/366/487226.png)no-repeat;} # smallbox {height:75px;} / * support bigbox*/ # marginbox {margin-top:-20px) of the background image in the case of no-repeat } / * this is the end of the box*/ of margin about how to set the background image in IE6 in CSS compatibility. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.