SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict vflytrap's Avatar
    Join Date
    Aug 2003
    Location
    Twighlight Zone
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image - reveal more when window demands

    Hi,
    I'm putting together a design, where there is a background graphic on the right edge of the page. My goal, for when the window is resized or anything, is for more of the image to show, rather than scootching everything over or resizing things. But I am not sure how to accomplish that using CSS. I don't want scrollbars to appear, and I want the flexibility of the page to really just be the image (less or more depending on resolution).

    Thank you so much for any help in advance...

    S*
    _________________________________________
    Rockin' in the free world...
    brilliant nonsensical ramblings

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really understand what you're trying to explain - any chance of a link or screenshots of the intended effect?

  3. #3
    SitePoint Addict vflytrap's Avatar
    Join Date
    Aug 2003
    Location
    Twighlight Zone
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure - sorry - its sort of awkward to explain -
    The first screenshot is what the page would look like at 800px wide - the second is what it would look like at 1000px - They're attached below...

    Let me know if that clarifies the question...
    Attached Images Attached Images
    _________________________________________
    Rockin' in the free world...
    brilliant nonsensical ramblings

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, how long does it take for attachments to be approved?!

    Can you post them on your site or something?

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Salisbury, UK
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you saying that you want the background image positioned relative to the left hand of the page?
    Fruity Solutions
    UK based web design, development and marketing

  6. #6
    SitePoint Addict vflytrap's Avatar
    Join Date
    Aug 2003
    Location
    Twighlight Zone
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So sorry, I didn't realize it would take so LONG! Here are the example images of what I am trying to get -
    The normal width
    800px
    and the wider example

    Notice how the image on the right is more visible, but the content remains the same size? That's what I am trying to do...

    Thanks so much for being patient and still helping me!
    _________________________________________
    Rockin' in the free world...
    brilliant nonsensical ramblings

  7. #7
    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 could try this sort of thing:

    HTML:
    Code:
    <div id="container">
    <div id="content">
    <p>Here is my content.</p>
    </div>
    </div>
    CSS:
    Code:
    #container {
    background: url(images/pic.gif) no-repeat 500px 0;
    width: 75%;
    }
    
    #content {
    width: 500px;
    }
    Your containing div will have a background image, starting 500px from the left-hand edge. If the div is less than 500px, the image will not be visible; the larger the div gets, more of the background image is revealed.

    The content div is limited to 500px wide, so it fits into the gap you have left.

  8. #8
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing that could affect this is, are you going to have whit emargins on every side like that or is that just in this picture?

  9. #9
    SitePoint Addict vflytrap's Avatar
    Join Date
    Aug 2003
    Location
    Twighlight Zone
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Buddy Bradley, that worked perfectly! Sorry I took so long to respond - I took the weekend off! I appreciate your help and patience...
    S*
    _________________________________________
    Rockin' in the free world...
    brilliant nonsensical ramblings


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
  •