Background image seems to repeat endless to the right
 

I've searched the forum about center and background styling topics, but to no avail (nothing for latest Atahualpa version anyway.)

My background image seems to stretch out to the right. (Please see attached images.) on my site allthingsriviera.com

I've added a background image (top left repeat) on a layout width of 1000, fluid 100% and layout max width at 1145.

What do I need to adjust to fix the post/page container in the center and avoid an eternally long (to the right) background? (On a mobile device, the post/page container is to the left and the background image continues to the right.)

I'm on updated WP and Atahualpa 3.7.13

Thanks for any help!

For some reason you have a scroll bar.
How big is the background image?
Instead of repeat perhaps you could use cover.

I'm not seeing the background when I view the site.

but your issue has to do with th ewidget area you have in the header and the 'position:absolute' - if you change it to 'relative' you will see it looks better on a mobile device.

Larry, if I put "cover" for the background image, the image disappears. The image is less than 1000px.

JD, the image is there alright. I'm not much worried about mobile devices at the moment, and when I changed "absolute" to "relative", it did nothing but disaligned my widget and the bottom scroll bar is still there.

:confused:

Go add this into your css and then see if you can determine what is happening

This is what happens, JD (see image attached). The scrolling bar still there, as you can see.

right, so what can you deduce? you have outlined the widget so you can see it. what do you see?
(I know what is wrong, now you have to work your way to the answer)

You're the man, JD! Thanks.

Do you want to explain the issue for others?

It seems the scroll bar came about because the widget container's width was not properly sized. When I created the widget for the header, I added the following CSS insert you (Juggledad) created:

#wrapper {position: relative;}
div#quotes_area {
border-spacing: 80px;
left: 900px;
position: absolute;
top: 90px;
width: 20%;
z-index: 99;
}

After tweaking it to the right size, the problem was solved.

When looking at it 20% certainly works but I don't think you need any width declaration. Is there some reason you put a width in?

Larry,
Seems to work without putting the width as well. Just copied and pasted CSS inserts rom what JD recommended for when one creates widgets on header.

Ahhh, see what blind copy/paste can do ;)
Just to let you know, the 'width: 90%;' made that element 90% of it's parent element. The parent element got it's width from the logoarea table which eventually got it's width from teh wrapper which had a minimum width of 1000px. So the widget area had a width of 900px.

That by itself is fine, BUT when you pushed that area to the left by 900px, the widget area now extended to 1800px from the left side of the page hence the scroll bar poping up.

Moral of the story: If a horizontal scroll bar shows up, something extends past the edge of the page.