×

Loading...
Ad by
Ad by

CSS 3里出现了类似的设置,但现在还没有阅览器能支持,现在用CSS是做不到的。一般用这个办法可以Faking a stretched background

   1. First, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the html and body tags:

          

   2. Add the image you want as the background as the first element of the Web page, and give it the id of bg:

          
          background image
          

   3. Position the background image so that it's fixed at the top left and is 100% wide and 100% in height. Add this to your style sheet:

          img#bg {
          position:fixed;
          top:0;
          left:0;
          width:100%;
          height:100%;
          }

   4. Add all your content to the page inside of a division called "content". Add this below the image:

          
All your content here - including headers, paragraphs, etc.
Note: it's interesting to look at your page now. The image should display stretched out, but your content is completely missing. Why? Because the background image is 100% in height, and the content division is after the image in the flow of the document - most browsers won't display it. 5. Position your content so that it's relative and has a z-index of 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet: #content { position:relative; z-index:1; } 6. But you're not done. Internet Explorer 6 isn't standards compliant and still has some problems. There are many ways to hide the CSS from every browser but IE 6, but the easiest (and least dangerous) is to use conditional comments. Put the following after your style sheet: ... 7. Inside the comment, add another style sheet with some styles to get IE 6 to play nice:
Report

Replies, comments and Discussions:

  • 工作学习 / 学科技术讨论 / 请教网站的背景图片如果是760X500大小,能不能弄成浏览时整个屏幕大?我查了一下,有的说用css可以,不过,我试了,图片会几张铺在一起,很难看。谢谢!(儿子上darcare给家长的任务)
    • google "css background", first try by yourself; back here if you got stuck
      • 谢谢,我发帖之前就试过了,用Repeat - x -y,或者用width=100%之类的,都会将那张图片重复,很难看。我觉得只能把图片尺寸放大才能弄的好。
    • CSS 3里出现了类似的设置,但现在还没有阅览器能支持,现在用CSS是做不到的。一般用这个办法可以Faking a stretched background
         1. First, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the html and body tags:
      
                
      
         2. Add the image you want as the background as the first element of the Web page, and give it the id of bg:
      
                
                background image
                
      
         3. Position the background image so that it's fixed at the top left and is 100% wide and 100% in height. Add this to your style sheet:
      
                img#bg {
                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100%;
                }
      
         4. Add all your content to the page inside of a division called "content". Add this below the image:
      
                
      All your content here - including headers, paragraphs, etc.
      Note: it's interesting to look at your page now. The image should display stretched out, but your content is completely missing. Why? Because the background image is 100% in height, and the content division is after the image in the flow of the document - most browsers won't display it. 5. Position your content so that it's relative and has a z-index of 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet: #content { position:relative; z-index:1; } 6. But you're not done. Internet Explorer 6 isn't standards compliant and still has some problems. There are many ways to hide the CSS from every browser but IE 6, but the easiest (and least dangerous) is to use conditional comments. Put the following after your style sheet: ... 7. Inside the comment, add another style sheet with some styles to get IE 6 to play nice:
      • 谢谢!试了一下,果然可以stretch到全屏,不过,图像失真的厉害,很难看。我还是找他们要一个大图来做比较好。