100% width bg images not extending on horizontal scroll

前端 未结 4 620
猫巷女王i
猫巷女王i 2020-12-03 17:20

I\'m noticing this issue. I made a quick screen capture to demonstrate: http://dl.dropbox.com/u/904456/2010-06-14_2323.swf

Basically when you have a min-width set an

4条回答
  •  猫巷女王i
    2020-12-03 18:09

    Without seeing any of the associated code I can only assume on what would need to be done.

    I normally do scalable designs and here is how I would approach your problem:

    Here is how I would generally setup a page with background colors such as what was shown in the video.

    HTML:

    CSS:

    body { width: 100% }
    #main-wrapper { width: 100%; background-color: #000 }
    #header-wrapper { width: 100%; background-color: #111 }
    #header { width: 200px; margin: 0 auto }
    #content-wrapper { width: 100%; background-color: #222 }
    #content { width: 200px; margin: 0 auto }
    #footer-wrapper { width: 100%; background-color: #333 }
    #footer { width: 200px; margin: 0 auto }
    

    The same concept can be applied for background images, though to maintain the appropriate effect (unless it is a pattern that can be repeated) you would need to have a very wide image or atleast one that fades to some background color. What you would do is place the image as the background image and then simply position it as center top and it will expand with the page.

    Hope this helps.

提交回复
热议问题