SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Background image not flowing repeatedly horizontally throughout site

    I'm trying to get a shadow to repeat horizontally full-width of the screen, but it seems to stop at a specific point. The shadow is at the top of the page (just above subscription).

    I appreciate your help.

    Thank you.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's working fine for me in Firefox. Have you refreshed your page (after a CSS update?)

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, I have. I see it cut off at about 980px.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cut off where? Do you want it to sit over the top of the white image to the left? if so, add this:

    Code:
    #whole {
      background: url("../images/shadow.png") repeat-x scroll 0 0 transparent;
      height: 120px;
      margin: 0 0 -120px;
      padding: 0;
      width: 100%; 
      position: relative; 
      z-index: 10;
    }
    If that's not what you mean, what browser are you using?

    EDIT: the code above isn't workable, I now realize, as it makes the form unclickable, so please ignore it.

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    no. the shadow needs to be behind everything else with the exception of the blue background.
    here's a picture of what I see:
    cutoff.jpg

    This is in FF, Google Chrome, etc. on a 1024 width screen.

    Thank you.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Doesn't happen for me on any browser, but I'm on a big screen. It's probably because your screen is narrower that the content area, so you have to scroll right. You can fix that with this:

    Code:
    #whole {
      background: url("../images/shadow.png") repeat-x scroll 0 0 transparent;
      height: 120px;
      margin: 0 0 -120px;
      min-width: 1200px;
      padding: 0;
      width: 100%;
    }

  7. #7
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That seemed to work very nicely!

    Thank you!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. It's a problem that is quite common with background images / colors when the browser gets narrower than the wrapper width. Scroll right, and the background is gone, so this is a nice way to fix this.


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
  •