SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stretching backgrounds

    I have an image I want to use in the backgroun of content items on my site. However as the page varies in height, with the amount of content what I want the background image to do is to stretch to fit. But this isnt possible, so I have split the image into 3 a Top, a Middle and a Bottom. The top and bottom cant be adjusted as they contain most of the image, however the middle one, is just two colours split in the middle.

    So is it possible to set 3 images as the backgroun? The top one to align top, the bottom one to align bottom and not repeat, and the middle one to go even behind the top and bottom and just repeat all the way down the page?

    Is this possible and if so how?

    Also anyone know why backgroound images dont show up in firefox?

    thxn
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I dont thinks its possible without, devoting the entire site structure to fit the background. What I mean is you could have div's which are spaced the way your want, but then your content would be trapped in those spaces. Well... mabye not... Anyway I could see the image, or could you mock up one which is similiar, and I'll see what I can do.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im sure I saw somewhere that you could assign multiple CSS styles to a background. I just cant find the damn article I read. Anyway thats what made me wonder, he basically had two or three different background options.

    So I thought,
    Background image, position top, no repeat.
    background image position bottom, no repeat,
    background image, repeat.
    So the background image that repeats is behind the other two :S

    I will get a graphic for you though
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  4. #4
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an image
    The top part shows how we designed it, with the background arking around the content. However a lot of content means the background repeats. I have added the background image on its own too, and cut it up into the 3 squares.

    The swoosh on the image actually join up in the bottom left hand corner but you dont see this on the website as its hidden behind the navigation so its not an issue.
    Attached Images Attached Images
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  5. #5
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Just waiting until the image is accepted. *clears throat*
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  6. #6
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't assign multiple background images to a single HTML element.

    To achieve the effect you want, you are going to have to use header and footer divs with the background-image set as the relevant top and bottom images. If you've already got standard page header+footer, why not use them to 'hang' the CSS off?

  7. #7
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is for the background of a content area and so only part of the site page layout. The header and footer of the page is not connected to this area.
    Header and footer Divs sound interesting.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  8. #8
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just thinking out loud here...

    Why couldn't you have three separate DIVs all positioned in the exact same place but with different z indexes. Then you could have the middle background on the bottom div, and then the header and footer images on the DIVs above?

    Like I mentioned at the top - I'm just thinking out loud and haven't thought it through yet...

    [EDIT]
    Yep - Just tried it and it works fine...

  9. #9
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way I would do it (first try) would be to create two absolutely positioned elements (header and footer) and stick them to the top/bottom of the containing element, then use a tiling background for the rest of the area:
    Code:
    #container {
    background: url(tile.gif) 0 50% repeat-y;
    }
    
    #header {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    }
    
    #footer {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    }

  10. #10
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here is what I was thinking. Of course you can make the #topleft absolute so you can have body margins/padding if you want. Also you could try fiddling with the z-index if you want the layout to overlap the #topleft.

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     	<title></title>
     	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <style>
     body{
     	margin: 0px;
     	padding: 0px;
     	background-color: #EFEFEF;
     	background-image: url('bbbright.gif');
     	background-position: bottom right;
     	background-repeat: no-repeat;
     }
     #topleft{
     	width: 471px;
     	height: 100px;
     	background-color: #EFEFEF;
     	background-image: url('tttleft.gif');
     	background-position: top left;
     	background-repeat: no-repeat;
     }
     </style>
     </head>
     <body>
     <div id="topleft"></div>
     test
     </body>
     </html>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by buddy
    #container {
    background: url(tile.gif) 0 50% repeat-y;
    }
    You'll need a postion :relative in there for the stacking context for the absolute elements. Otherwise that should work fine

    Paul

  12. #12
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    You'll need a postion :relative in there for the stacking context for the absolute elements. Otherwise that should work fine
    I was envisaging the header and footer divs being outside the container div, actually - so in terms of stacking, they would fall underneath everything anyway.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    ok

  14. #14
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Guys im still working on this on localhost, when I get something I can show you I will, but by then I should have it fixed
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info


Bookmarks

Posting Permissions

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