100% background width issue, with content wider than window

Discussion in 'CSS' started by wolfestone, Feb 23, 2009.

0
  1. #1
    I have a wrapper with 100% width & background color, and a very wide aspx gridview inside it.

    When I expand the browser window out, the background goes to 100% of the browser width, but when I then scroll to the right, the background stops.

    I want the background to extend the full width of the browser, including the area that is initially not shown because of the scroll.

    I've attached a screenshot - the gray and tan pieces should extend the full width, but they cut off at the browser width before scrolling. Scrolling to the right (as in this screenshot) shows the rest of the gridview, but not the background.

    Any suggestions would be very much appreciated.

    here's a similar demo (not mine) of the problem but using tables instead of divs: http://averra.com/css/css_tables.html
     

    Attached Files:

    wolfestone, Feb 23, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can't see what the problem is with http://averra.com/css/css_tables.html ?

    Is the aspx gridview a set width, then apply this width to the wrapper,
    Or if not try removing any width from the wrapper altogether
     
    wd_2k6, Feb 24, 2009 IP
  3. Lpe04

    Lpe04 Peon

    Messages:
    579
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Have you tried { background-image:url('image.jpg') } or { background-image:url('image.jpg');background-repeat: repeat } ?
     
    Lpe04, Feb 24, 2009 IP
  4. wolfestone

    wolfestone Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The gridview is not a fixed width unfortunately. I just tried tiling a background image of a solid color, but have the same problem.

    This page uses an aspx theme, which as I understand it overrides specific styles you list. If you don't list a style rule, it just uses the original one. So if I leave off the width:100% or width:auto; it automatically grabs the previous stylesheets width:800px;

    :edit: Solved by floating the gridview and various containers.
     
    wolfestone, Feb 24, 2009 IP