[Resolved] Background Image Full Page

[Cassie Thomas]

Hi Tom,

I’ve uploaded a background image (paper texture) to my body content but I would like the image to go from the header all the way to the footer. Currently the image in the body content makes the side bar widgets, the header and footer fill with color which I’d like to turn transparent so you can see the paper texture instead. When I upload the paper texture using the add-on for each section the photo gets repeated and the boxes look out of place since the paper texture is not a tile and is not meant to be repeated. I’ve used CSS transparency, but when I do that, it removes the entire background and shows the book texture, not the paper texture. Please let me know if there is a way I can make the paper texture fill the entire height and with of the container.

http://www.CassieTM.com

Cassie

[Jamal]

Set “Size” option to “Cover”

https://generatepress.com/forums/topic/whole-width-site-background/#post-179222

[Cassie]

Hi Jamal,

I’m not looking for the background image, that is already set. I’m looking for the container image to cover the whole container.

Cassie

[Jamal]

Hi Cassie,

My bad,i was in a hurry to answer your question and didnt read in detail. I will try as much as i can and hope Tom can help you with the rest.

Currently the image in the body content makes the side bar widgets, the header and footer fill with color which I’d like to turn transparent so you can see the paper texture instead.

Please go to ” Appearance > Customize > Colors > Content Colors ” and remove the “Background” color value.

Have you tried setting a background image under “Content”? I think its this that will appear as a background for your posts and pages content.

[Tom]

Ah I think I see the issue.

You’ll need to wrap your entire site in a new container using GP Hooks.

In Before Header, add an opening HTML tag:

<div class="full-container">

Then in the wp_footer hook, add the closing tag:

</div><!-- .full-container -->

Then apply your image to that container (and not the others) using CSS:

.full-container {
    background-image: url(URL TO YOUR IMAGE);
}

[Cassie]

Looks like that just replaced the background image of the book, not the container image with the beige.

http://www.CassieTM.com

[Tom]

You need to remove the color values from your header and content in the Colors section of the Customizer.

That will allow the background image to show through.

[Cassie]

Perfect. I had to add

.full-container {
	position: absolute;
	left: 20%;
}

to the CSS above but it’s working perfectly! Thanks again for your help!

[Tom]

Glad it’s working 🙂

[KENNETH]

Hi,

I have a similar issue. but the problem is I’m unable to activate the GP Premium as it clashes with toolset plug.

http://www.officeforrent.sg

password:ofrwins

How can I add an image to cover the whole page from side header to footer without repeat width 100% ?

Thank you

[Tom]

You could try something like this:

body {
    background-image: url( 'URL TO YOUR IMAGE' );
    background-size: cover;
}

[KENNETH]

Hi,

I added. but it is not working.

please inspect..

body {
background-image: url('http://officeforrent.sg/wp-content/uploads/2016/03/img_7659-copy.jpg' );
background-size: cover;
}

Thank you

[Tom]

Looks like you copied from the email maybe?

You need to replace the ' characters with single apostrophes: '

[KENNETH]

Hi Tom,

Please copied to the custom css.

body {
background-image: url(‘http://officeforrent.sg/wp-content/uploads/2016/03/img_7659-copy.jpg’);
background-size: cover;
}

Im not sure what is wrong.

[Tom]

Looks like your CSS is broken.

When there’s a break in the syntax is CSS, anything below it isn’t read.

Paste your custom CSS into here: https://jigsaw.w3.org/css-validator/#validate_by_input

[Author]

Posts