[Resolved] Page background for wide screen border

[Kathryn]

Hello. I am a novice for my own website. I am updating my website with your theme & add-ons, but I can’t figure out how to set a background that only displays on the outer side edges of the page (on wide screens). In my prior theme the code in the style sheet was:
————-
html, body{ margin:0px 0px 20px 0px; padding:0; text-align:center; background: url(img/backgroundme2.jpg) top center repeat-x #4E683C; font-family:verdana,arial;}

#pagewidth{ width:794px; text-align:left; margin-left:auto; margin-right:auto; }

#page{ width:794px; padding:0px 0px 0px 0px; background-color:#FAF8F7;}
—————
The image file is tall & narrow (25×856) with the color grade going from light to dark at the bottom. You can see how the border works on my website (this is my old theme – I’m working off-line on the new theme).
link to example page on website

I tried inserting the same image file in as background in the customizer, but it puts the image in horizontally instead of vertically. Plus, it breaks the background into header background and content background, and I would like it to be the same for the entire page.

Can you help me with this?
Otherwise, I am enjoying the features of your theme.
Kathryn

[Tom]

Hi Kathryn,

You tried setting the image as the body background in the “Background Images” section of the Customizer?

Upload the image and set the Repeat to “Repeat x”.

Then in “Position”, type: top center

That should give you the same result as the CSS above.

Let me know 🙂

[Kathryn]

Yes – those settings worked. The header area is still a different format, but I see that you have it defined differently and it is okay. Thank you!

[Tom]

No problem 🙂

[Author]

Posts