简体   繁体   English

如何在HTML元素上一致地设置背景图像

[英]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 doesn't want to play. 我说的是<html>元素本身,似乎可以在大多数浏览器中使用,但是IE7 / 8不想播放。 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. 我什至这样做的原因是因为我的工作是将使用一百万个框架的RoboHelp Web输出作为主题-我需要设置最顶部的框架集的背景图像,否则当嵌套框架调用垂直框架时背景位置不会对齐滚动条。

I tried applying height:100%; 我尝试应用height:100%; on the <html> element also. <html>元素上。 Solution must work in IE6+. 解决方案必须在IE6 +中运行。 Javascript should be avoided. 应该避免使用Javascript。

EDIT: 编辑:

Clarification: I'm applying style="background: transparent url(image.gif) left top no-repeat;" 说明:我正在应用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). html通过在标头样式块元件(一切是动态的,这是我的唯一访问html元素的可用的方法)。

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. 像在我的情况下那样,将body标签替换为框架集,现在图像不再显示。 This looks to be IE-frameset specific, any suggestions? 这看起来是特定于IE框架集的,有什么建议吗?

Not sure I completely understand your problem. 不确定我是否完全理解您的问题。 But applying height to an HTML element is a definite no-no. 但是,将height应用于HTML元素是绝对不可以的。 You can apply a background directly to the entire page using the HTML selector 您可以使用HTML选择器将背景直接应用于整个页面

html { 
        background-image: url("../images/background_image.png"); 
     }

Hint: the '..' in the above example moves to the previous web directory. 提示:上例中的“ ..”将移至上一个Web目录。 Be cognizant of your file structure. 了解您的文件结构。

I think you should be using CSS instead of HTML background image tag. 我认为您应该使用CSS而不是HTML背景图片标签。 Background image in HTML is now deprecated (outdated and not recommended) by the W3C. 现在,W3C已弃用HTML中的背景图片(过时,不建议使用)。

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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM