[TushitaKBCParticipant]

I would like to do a page specific background image. I am trying to place the image using the below css. I got the idea from another forum post. I am looking to fill the entire area between the header and the footer. I would like to also fill the entire screen left to right.

Also, I am going to want to make the image so that it is correctly sized on any screen regardless of the screen size. Can you tell me how to do that?

The page I am working on is here

.page-id-2821 .x-container-fluid.max.width.offset.cf,
{
	background: url("http://meditateinolympia.org/wp-keajra/uploads/2015/10/newsletter-sign-up-guy.png") no-repeat left;
}

Thanks for your help.
Cheers

[FriechModerator]

Hi There,

Thanks for writing in! Please update your code to.

.page-id-2821 .site {
	background-image: url('http://meditateinolympia.org/wp-keajra/uploads/2015/10/newsletter-sign-up-guy.png');
	background-size: cover;
	background-repeat: no-repeat;
}

Keep in mind that this CSS is only for the specific page you provided above. Use the background option on customizer under the Layout and Design tab if you want the image background site wide.

To make the footer and header background color transparent navigate to customizer under the Renew tab you would see the background options there for header and footer.

If that does not work

You can add this under Custom > CSS in the Customizer.

.x-topbar,
.x-navbar,
.x-colophon.top,
.x-colophon.bottom {
	background-color: transparent !important;
}

Hope it helps, Cheers!

[TushitaKBCParticipant]

Can you tell me how to do this so it only fills the entry wrap? Otherwise I get weird results on phones and tablets.

Thanks

[FriechModerator]

Hi There,

You can update the code to:

.page-id-2821 .site .entry-wrap {
	background-image: url('http://meditateinolympia.org/wp-keajra/uploads/2015/10/newsletter-sign-up-guy.png');
	background-size: cover;
	background-repeat: no-repeat;
}

Hope it helps, Cheers!

[TushitaKBCParticipant]

Perfect!

[Rue NelModerator]

Awesome!
Have a great day.

[Author]

Posts