Add a full screen background image to your WordPress site

Posted by on May 31, 2012 in Blog, Elegance, Gridport, Storefront Themes, Themes, Wordpress | One Comment

The Question

I have a background image which, when opened on a computer with larger resolution, doesn’t resize. The height is ok but not the width. Is it possible to have it scale to fit the width?
Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn’t stretch weird). Also, doesn’t cause scrollbars, just cuts off vertically if it needs to.

Answer, no and yes, trickery required

Firstly the no, a background image can not be set to be 100% width. CSS just does not include that capability. Lets think laterally though, we want a image behind everything else on our page, we do not care how it gets there. There is no law that says an image in the background must use a CSS background rule. A regular image tag allows us to set the 100% width. So lets just take an image and put it behind everything.
As I was asked about this in relation to the Storefront themes Gridport theme I am going to use that as an example. You should be able to adapt this to any theme. Some of this code may actually not be necessary in your theme. I will attempt to point that out as I go along.

Note:

Remember if you just want a background pattern that fills the screen then you can use CSS background rules repeat functions to use a seamlessly repeating small image to fill the screen. In Storefront themes this can be achieved in the Storefront Options Panel without writing code. You can also position a background image in a non-repeating manner using background CSS if you do not need to have it scale to fit.

The method – first the PHP

Well actually first yo need an image to use. So upload an image via FTP to your themes images folder or upload one with the WordPress media manager and copy and save the URL when you do. make the image a decent size to start with so it does not look too bad when scaled up on big screens. Do try and compress as much as possible to be kind to your users, a 60% quality jpeg at most I think.

This is pretty easy stuff so be brave dig in even if you have not done it before. If you have never edited PHP see the panel “Tools” at the ned of this post. In Gridport I ran into a problem. The theme has no wrapper div around all of the site content and that was necessary to simplify things. It is necessary to position all of the content over the image. That is a much simpler task with one container to position. This code will add one. For other themes you may find one already exists For example in Storefronts Elegance theme there is already a div named wrapper that contains the whole site and is centered. I will add some explanation for that theme too as I go along.

In the Gridport theme folder open header.php and right after the opening body tag, around line 61 add the two lines of highlighted code below. Put your images URL in line 62.

</head>
<body>
<img id="background-img" class="bg" src="http://mySite.com/gridport/wp-content/uploads/2012/06/myBackgroundImage.jpg" alt="" />
<div id = "big-container">
<div class="header-left">

<!-- ========== Start of Logo =========== -->

Now open footer.php and close that div around everything. Add the code highlighted code around line 14.

</div><!-- end footer -->

<script type="text/javascript"> Cufon.now(); </script>
<?php wp_footer(); ?>
</div><!-- end big container -->
</body>
</html>

Ok that is all of the PHP. If you were to open Storefront Elegance you would see the opening and closing of a div named wrapper in pretty much the same locations. In fact you would see this in many WordPress themes. It may be called something else but it is the first div opened after the opening body tag and the last to close before the closing body tag.
Ok go and reload the site and take a look. You will see an image and probably below it on the page all of your content. Not quite what we want. Time to fix the layout and scale that image.

Lets Style it with CSS

We have a couple of problems.

  1. The content is pushed down below the image.
  2. The image is not filling the screen.

One is because the image is now an element in the body structure not a background so it occupies space on our page. This is fixed by the second block of CSS which takes our new div containing the whole site and places it in the top left corner of the browser window. It will stretch to suit its contents as we have not specified any size. We also give the div a z-index so that it overlays the image and is not covered up by it.
Two is fixed by scaling the image using width and using height:auto which will make it stay proportional and not distorted by stretching. If you do not mind stretching, maybe it is abstract, then you could also specify height:100% and your image would not be cropped.
The first rule below is because Gridport already has some default background rules. You may not need this rule but it probably will not hurt. For Gridport or any Storefront theme make sure you do NOT have a background image OR color set in the Storefront Options Panel.

/* clear any backgrounds */
html, body, #footer{
background:none !important;
}
/* position our new container with all of the site in it over the image */
#big-container {
     left: 0px;
     position: absolute;
     top: 0px;
     z-index: 10;
}
/*stretch the image to fit the browser window*/
.bg {
	width: 100%;
        height:auto;
	position: absolute;
	top: 0;
	left: 0;

}

Now in the Elegance theme the div named wrapper is already controlled so just leave out the whole big-container rule you do not need to apply it to wrapper.

Custom CSS:

If using a Storefront theme, this code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.
Other themes may have their own methods for adding custom CSS. Or you can create a child theme with a style.css of its own. This wil stop theme updates over-writing your CSS. You may also want to put the edited header and footer php files in your child theme.

PHP Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

1 Comment

  1. Mar
    July 14, 2014

    Hello, thanks for your help! Any idea how I can do the image at 100% on the Monaco Theme?
    Thank you in advance,
    Mar.

    Reply

Leave a Reply