Results 1 to 10 of 10
  1. #1
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretch background

    Is there an easy way to have a background image that is stretched to view over the width of the browser window (in much the same way as a table can be set to span 100%).

    This is for a fairly simple web site. I want to be able to stretch an image - for example the attached gradient - so that the left and right edges are dark, with the centre always light, regardless of the width of the browser window.

    (I have a strange feeling I've answered this very question myself once before...)
    Attached Images Attached Images

  2. #2
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Stretch background

    The secret is not to have it as a background image, but an image in the page and use layers which is not the best option...'cos I am racking my brain about CSS2 so will be a supplementary post once I finde the reference.

    Here is a good link with some CSS stuff

    http://www.htmlite.com/faq022.php
    Jerry

  3. #3
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Stretch background

    Thanks for that - I shall read more when I have a spare mo or three - but meantime I may have stumbled on a quick'n'dirty method.

    The gradient itself needs only to be a matter of some 20 pixels wide on each side of the page. If I create a table with three columns and fix the outer two at 20 pixels, and have a 20px left and right image in them, in seems to do the trick. The centre column has the text and stuff, which doesn't need or want to be over the gradient anyway, and has the central colour as a background. The page itself has the 'outer' gradient colour as a background.

    So far, it seems to work, but I may be back....

  4. #4
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Stretch background

    <P ID="edit" class=small>(Edited by Jezza on 02-Oct-06 20:49. To change 20% to 236 px to make a better transition)</P>Oh, it appears you may have sorted this one yourself. I don't think there is an easy way to do this with current CSS but I had a little play and it appears to be a similar answer to your own.

    I cut the image in half and then created 3 <div> areas #leftnavbar, #rightnavbar and #content

    Hating tables for creating structure to pages (accept for data) I created this set of styles:

    #leftnavbar{
    float: left;
    width: 236px;
    margin: 0px;
    padding: 0px;
    background: url(leftback.jpg) repeat-y;
    }

    #rightnavbar{
    float:right;
    width: 236px;
    margin: 0px;
    padding: 0px;
    background-image: url(rightback.jpg) ;
    background-repeat: repeat-y;
    height: 100%;
    }

    #content{
    float: left;
    width: 100%;
    background-color: #FFFFFF;
    }


    It is a very, very, very basic box model and would have to be cleaned up big style but you can use this as a concept model. I am doing about 8 things at the moment so cann ot get it too tidy for you
    Jerry

  5. #5
    Plutonium Lounger Leif's Avatar
    Join Date
    Dec 2000
    Location
    U.K.
    Posts
    14,010
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Stretch background

    Thank you - once again you've gone beyond the call of duty <img src=/S/smile.gif border=0 alt=smile width=15 height=15>

    I'll have a proper gander when (if!) I get a mo at work tomorrow...

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Stretch background

    Another approach might be:

    Left half becomes background-image of <body> (with a background-color of white).

    Right half becomes background-image of <div id="container"> (with a background-color of transparent), right-aligned, where that <div> consumes 100% of the height of the body.

    But I haven't tested that idea. And I'm not sure what happens if the window gets too narrow...

  7. #7
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Stretch background

    Ok OK, tell me off again but I thought of this as a nice challenge. This is a proper box model with a variable content area and fixed left and right column with header and footer. You can remove the latter 2 if you want...enjoy
    Jerry

  8. #8
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Stretch background

    Jeff that is a good approach actually as you can make the background image fixed and the content have a margin width the same as the background image width...W3C use a similar method for some of their pages. Now you have said that I created a web page set for a friend with that idea (but not the right hand column thingy <img src=/S/grin.gif border=0 alt=grin width=15 height=15>)
    Jerry

  9. #9
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: Stretch background

    What about doing it with Javascript?

    < SCRIPT LANGUAGE="JavaScript" >
    var screenwidth;
    var theimagetag;
    screenwidth = screen.width;
    theimagetag = "< img src='background.jpg' width='" + screenwidth + "' height='22' alt='' border='0 '>";
    </SCRIPT>


    then

    < SCRIPT LANGUAGE="JavaScript" >
    document.write(theimagetag);
    < /SCRIPT >

    Added a bity later.
    I have just re-read the original post - and I see that you said background image. I don't this this can be used for background images.
    Regards
    John



  10. #10
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Stretch background

    Hi John

    Your answer is not wrong as there is the holy grail of sorting out how to stretch a background image. I have gone off again and found another solution by creatin a background div tag which acts like a container within the body tag...all other tags can sit inside there.

    In this example I reverted back to Leif's original image. The only way to get this to worl was to delete the doctype which is not really good practice but as practitioners we have to break a few rules [img]background.jpg[/img]
    </div>
    Jerry

Posting Permissions

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