[Resolved] Background Image Overlay Wrapper CSS

[Garth Dryland]

Hey Tom

Over the last couple of days I’ve been looking into moving this site into WordPress and have 90% of the theme sorted using GeneratePress but for the life of me I cant work out if there’s a way within GP to include the background wrapper as shown below?

If you inspect the code from the background or header area you will see the css wrapper id. You should see css (below) from this site for the background (img01.jpg) and background wrapper (img02.jpg)

/* Body */

body {
margin: 0;
padding: 0;
background: #F7F7F7 url(../images/img01.jpg) repeat left top;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 14px;
color: #5A554E;
}

#wrapper {
margin: 0px;
padding: 0px;
background: url(../images/img02.jpg) repeat-x left top;
}

As you will see, the background image img01.jpg repeats in both directions (x and y)
Whereas the background image img02.jpg repeat-x direction starting in the left top across the page overlaying the img01.jpg background image.

Is there a css class id I can use to include a wrapper so i can utilize these images which match the header image perfectly?
I searched the GP forum and found reference to .site-wrapper but it didn’t help me.

Cheers

[Tom]

Hmm tough one.

I would probably try to attach the top image to the .site-header element, and the bottom image to the .site-footer element.

Does that not work?

[Garth Dryland]

Hi Tom

I tried that but it just inserts the images into the header and footer area respectively.

After a lot more searching I found this css3 layout (as shown below) on the internet standards site W3 Schools.

/* Body */
body {
background: url(../wp-content/uploads/2016/05/img02.jpg) left top repeat-x, url(../wp-content/uploads/2016/05/img01.jpg) left bottom repeat;
}

I should be all good now.

Cheers.

• This reply was modified 9 years, 10 months ago by Garth Dryland.

[Tom]

Awesome, glad it’s working 🙂

[Author]

Posts