Full screen background image

[sinoun]

I am using Altitude theme and was wondering if there was a way to make a page with a full screen background. To be specific, I'm looking to create something similar to the first part of the homepage, where there is a full screen image and text inside. This would be a nice touch for a landing page. Anyone have any suggestions or advice on how to go about doing something like this?

Thanks!

[CleanPageDom]

Hi there

You can certainly put a full-screen background behind a landing page. Are you OK with editing the CSS of your site?

If so, you'll need to prepare the full-screen image (this link has a lot of good information about selecting the image size - I tend to go with 1920 x 1080, so long as you can get it small enough in file size).

Upload the image to either your theme's Images folder, or to the Media Library, then, in your style.css file, you'll need to specify the page and add the image as a background, like this:

body.page-id-X {
background: url(images/filepath.jpg OR http://www.siteaddress.com/wp-content/etc etc) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

See this CSS Tricks article for more about the background-size etc properties.

You can find the page-id by viewing the source of the page and doing a Find for "page-id". Or you could add a specific body class in the Genesis options on the page editor, in which case you would add body.mybodyclass { /*CSS*/ }

Hope that makes sense.

Thanks
Dom

---

Let’s build a website together…

[sinoun]

Thank you so much for this! It worked great, but how do I make the main body where the text is transparent? Right now it's at it's default white: http://shiftwebsolutions.com/test-2/

[CleanPageDom]

OK, cool . Glad it worked. Nice image, BTW.

To target the white background, you're looking at .site-inner:. You've got a number of decisions to make.

So, you could go:

body.page-id-6045 .site-inner { 
background: transparent;
}

And then make the body text color white (body.page-id-6045 { color: #fff; })

But then you can't really read the text over the background image.

Another solution would be to add opacity to a white background:

body.page-id-6045 .site-inner {
background: rgba(255, 255, 255, 0.7);
}

NB: "255, 255, 255" is the RGB settings for white (you can use Devoth's Hex to RGB converter to find any RGB color value). The 0.7 is the opacity - 0 is transparent, 1 is full color.

If you opt for a background color of some sort, I'd be tempted to add some top padding and a small border radius to the .site-inner:

body.page-id-6045 .site-inner {
background: rgba(255, 255, 255, 0.7);
border-radius: 3px;
padding-top: 40px;
padding-top: 4rem;
}

Thanks
Dom

---

Let’s build a website together…

[sinoun]

Thank you so much! This worked great. I should have mentioned I tried the background: transparent and background rgba, but it didn't work for me. The .site-inner addition is what made it work. Thanks! 🙂

[Author]

Posts