This guide addresses the different scenarios when applying backgrounds to HTML documents, clarifying why specific behaviors occur and providing solutions for achieving desired background effects.
It's essential to note that there's a difference when setting background properties on the and
elements in standards mode.To achieve effects like a background color with a semi-transparent image overlay, it's not necessary to use separate and
elements. Instead, utilize the background-color and background-image properties in conjunction:body { background: #ddd url(background.png) center top no-repeat; }
To combine multiple background images, you can utilize CSS2 techniques or take advantage of CSS3 enhancements:
html { height: 100%; background: #ddd url(background1.png) repeat; } body { min-height: 100%; background: transparent url(background2.png) center top no-repeat; }
body { background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat; }
If your goal is to support older browsers, utilize the CSS2 method for applying multiple backgrounds as it's supported back to IE7. Keep in mind that the CSS3 multi-layered background syntax may result in only the bottommost layer having a background color.
The above is the detailed content of How to Effectively Use HTML `` and `` Backgrounds?. For more information, please follow other related articles on the PHP Chinese website!