Background Image Full Page

Set “Size” option to “Cover”

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

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

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.

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);
}

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

http://www.CassieTM.com

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.

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!

Glad it's working :)

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

You could try something like this:

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

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

Looks like you copied from the email maybe?

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

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.

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