Full width background image

Custom CSS is outside the scope of our normal tech support, so be aware that we will not be able to provide extensive help with CSS code

Normally, background images are applied to your site at 100% their normal size. This means that a 1000px wide image will always appear at 1000px wide, whether your screen shows 600px wide or 6000px wide.

But using a special CSS code can change the way browsers display a background image. You can use code to grow a background to fit or fill a background area.

Two different background techniques

There are two main keywords that you can apply to the background-size property.

  • cover tells the browser to make sure the image fills the entire background area, even if it has to enlarge the image beyond 100%, and depending on aspect ratio may cause some edges of the image to appear outside of view.
  • contain tells the browser to make sure the image fits the entire background area, even if it has to enlarge the image beyond 100%, but will leave space around the sides of the image to keep it entirely in view.

How to apply the CSS code

To apply one of these options to any of the site outer background images uploaded to “ProPhoto” > “Customize” > “Background” your CSS rule in “ProPhoto” > “Customize” > “Advanced” > “Custom Code” will look like this:

  • Site outer bg #1 –
    body.not-mobile {background-size: cover; height: 100vh;}
  • Site outer bg #2 –
    body.not-mobile:before {background-size: cover; height: 100vh;}
  • Site outer bg #3 –
    body.not-mobile #inner-body {background-size: cover; height: 100vh;}

You can replace the word cover with the word contain if you prefer the other style.

To play with these options and see the different effect they have see these background-size demos

When using extra background images on specific pages

If you use the Extra Background Images feature in ProPhoto 5 to apply a background to a specific page, you may need to use another version of the code. For example, when applying the code body.page-id-326.not-mobile:before to show your image on a page with ID number 326, you could use this code to apply the sizing and height:

body.page-id-326.not-mobile:before {background-size: cover; height: 100vh;}

As you can see, you simply use the CSS selector that you are applying to your extra background image, and follow it with the code in the { } curly braces.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us