Background image not flowing repeatedly horizontally throughout site

HTML & CSS
1

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

It’s working fine for me in Firefox. Have you refreshed your page (after a CSS update?)

3

Yes, I have. I see it cut off at about 980px.

4

Cut off where? Do you want it to sit over the top of the white image to the left? if so, add this:

#whole {
  background: url("../images/shadow.png") repeat-x scroll 0 0 transparent;
  height: 120px;
  margin: 0 0 -120px;
  padding: 0;
  width: 100%; 
  [COLOR="#FF0000"]position: relative; 
  z-index: 10;[/COLOR]
}

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

no. the shadow needs to be behind everything else with the exception of the blue background.
here’s a picture of what I see:

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

Thank you.

6

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:

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

That seemed to work very nicely!

Thank you!

8

You’re welcome. :slight_smile: 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.