www.webdeveloper.com
Results 1 to 5 of 5

Thread: background-image not filling browser window

  1. #1
    Join Date
    Nov 2010
    Location
    Beaverton, OR
    Posts
    7

    background-image not filling browser window

    the <div> container is defined as "width:100%" but the background image does not file the browser window, only as far as text appears on the longest line.

    .master #mainContent {
    z-index:-1;
    position:absolute;
    top:109px;
    left:160px;
    height:100%;
    width:100%-160px;
    background-image:url(_Images/bg_Blue_Wave.jpg);
    background-repeat:no-repeat;
    padding:20px
    }

    Note: before you ask, the image is large enough.

    Thanks for any help.

    Arthur

  2. #2
    Join Date
    Oct 2005
    Location
    Cambridgeshire, UK
    Posts
    191
    Is 'width:100&#37;-160px;' even valid CSS? I've never seen this in my eight years of development :-P Could be where the issue lies
    BIOSTALL.com
    - Freelancing Services
    - Web Development Snippets, Hints and Tips

  3. #3
    Join Date
    Nov 2010
    Location
    Beaverton, OR
    Posts
    7
    There is a sidebar 160px wide. a div with width:100% is then 160px wider than the browser window, requiring constant use of the horizontal scroll bar.

    I tried a lot of things until the width:100%-160px which dreamweaver flags as unsupported but it works, check it out at www.AllThingsAquatic.com

    You will see by looking around that all pages with enough text to wrap around display the background image correctly, but the others have it chopped somewhere around the middle of the page. They all use the ID=mainContent.

  4. #4
    Join Date
    Nov 2010
    Location
    Beaverton, OR
    Posts
    7
    OK, I've come up with some kludge. It is not elegant but it kind of works. I created a div as the first element inside of the mainContent div. In there I put a few "The quick brown fox ... " with a color:white (that you cannot really see over the backgound). I used a top:0 attribute on this div. You can see the result at www.AllThingsAquatic.com sidebar menu "Products/Fountains" then click Outdoor on the to menubar.

    There's got to be a better way to force the background image to fill up the browser window (viewport).

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    CSS2.1 doesn't allow background image resizing. CSS 3 does, but is not supported by all browsers yet. For 100&#37; background images, take a look at:

    http://www.cssplay.co.uk/layouts/background.html

    Used as a link.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles