How to consistently set background-image on HTML element
I'm talking about the <html> element itself, seems to work in most browsers, but IE7/8 d开发者_运维百科oesn't want to play. The reason I'm even doing this is because my chore is to theme a RoboHelp web output which uses a million frames - I need to set the topmost frameset's background image otherwise background-positions don't line up when a nested frame invokes a vertical scrollbar.
I tried applying height:100%; on the <html> element also. Solution must work in IE6+. Javascript should be avoided.
EDIT:
Clarification: I'm applying style="background: transparent url(image.gif) left top no-repeat;" to the html element via a style block in the header (everything is dynamic, this is my only available method of accessing the html element).
Good heavens, just tested this on a basic page - fine. Replace the body tag with a frameset, like in my situation, and now the images don't show up. This looks to be IE-frameset specific, any suggestions?
Not sure I completely understand your problem. But applying height to an HTML element is a definite no-no. You can apply a background directly to the entire page using the HTML selector
html {
background-image: url("../images/background_image.png");
}
Hint: the '..' in the above example moves to the previous web directory. Be cognizant of your file structure.
I think you should be using CSS instead of HTML background image tag. Background image in HTML is now deprecated (outdated and not recommended) by the W3C.
Something like this:
<html class="imageBox">
<style type="text/css">
.imageBox {
width:300;
height:100;
background: url("/foobar.gif") #ff9900 90% 30% no-repeat fixed
}
</style>
<p>This div element has a background-image.</p>
</html>
加载中,请稍侯......
精彩评论