SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left & Right of body Background Possible?

    Hi,

    I was wondering if it is possible to create a left and right background for the body? I want the background image to fade out from both sides of the body. So it basically be a left and right image that doesn't repeat(probably the sun burst fading out for a nice transition) Any links/suggestions?

    I am currently in the process of designing my portfolio, its just the header right now, link in sig.

  2. #2
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.

    I assume the usual approach would be to have one (presumably semi-transparent) graphic assigned as a background image to the <html> element, and the other to its immediate descendant, the <body> element. Of course, the child elements (e.g. <div> elements used for document structure) would have to be transparent (i.e. have no background-color value other than 'transparent') in order for the said background images to be visible.

    I hope this helps.
    Be not too sure that none of the old magic endures...

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need both background images sticky to the left/right of the content on the site(i.e. so the sunburst go beyond the content and fade out) Hope this make sense

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Why don't you just use one large image that is wider than you need that fades into the background eventually. If all you want is the sunburst effect to carry on then you will have to have images anyway so you may as well have one centred image in the background that will reveal more as the window is widened. You can make it fade eventually into the background at the extremes.

    The left and right backgrounds of this example are just a single large image.

    You may need to explain a bit more what you want exactly if the above doesn't suit

  5. #5
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I took your advice and tweaked it a little bit. I have 2 background images in place, one that repeats the "ground" once the viewable window goes beyond my sunburst fade. Thanks for the help!

    CSS
    Code CSS:
    body {margin:0;padding:0;background: url(images/bg-body.gif) repeat-x #220001}
    #fauxBg {width:100%;background: url(images/bg-fade.jpg) no-repeat top center;}
    Code HTML4Strict:
    <div id="fauxBg">
    <div id="wrapper"><img src="images/siebird.jpg" width="900" height="349" /></div>
    </div>


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
  •