Joomla web page with large background image

It may be that you wish to have a large background image the expands the entire screen on your Joomla site. This might be a large photo or advertisements. You also may wish to be able to change this image from Module Manager or customize it for different pages on your website.

There are things to consider when using a large image for the background on your website. Large image files will slow down page loads. You do need to be careful that you use an image that has been optimized for the web. The file size for this image should not be too large and you may wish to disable the loading of the image for mobile devices that likely won't see the image on the screen anyway.

There are a few different approaches that you can take with a Joomla site for adding an image that extends the entire screen and sits behind the content.


Choose a template that has this built in. Some 3rd party templates will have a module set up for the background image.


Add the image in the stylesheet for the <body> tag. This is a simple step for to add a background image to the body tag. The image is automatically sitting below everything else on the page. One drawback with this approach is that you need to edit the stylesheet to add or change the image. If you have people adding content to the site other than web developers, this can prove problematic. Another drawback is that the image is then the first thing to load into the DOM and can slow down the rest of the site from loading. If you want different images on different pages, you will need to use a template that recognizes the Page Class.

Here is the code for your stylesheet:

body {background-image: url(../../../images/backgrounds/mountainview.jpg"; background-repeat: no-repeat; background-attachment: fixed;background-position: center;}

 

Put in the correct path to your image file. This styling can also all be put into the shortcut "background" property. If your template is set up to recognize page classes, you can add specific images for different pages, for example body.aboutpage or body.tourismpage.


Create a <div> to hold this image and add it to the end of the document. The <div> will be styled to be a fixed positioned so it won't change the page's layout. The image will now be the last thing to load on the page, so the content will appear first. You should still use an image with a reasonable file size and that is optimized for the web. You still need to code in the URL to the image in the style sheet, so this may prove a problem if you have non-web developers adding or changing the image. Again, if you want different images on different pages, you will need to use a template that recognizes the Page Class.

Edit the index.php for your template (make a safety backup first) and add the following lines, just before the closing </body> tag. Be sure this <div> does not reside inside any other elements on your page. 

<div id="widebackground"></div>

Add the following styles to your style sheet for your template:

#widebackground {position: fixed; width: 100%; height: 100%; z-index: 1;background-image: url(../../../images/backgrounds/mountainview.jpg"; background-repeat: no-repeat; background-attachment: fixed;background-position: center;}

As with the background image for the <body> tag, you can customize this for different pages if your template recognizes page classes, for example: body.tourism #widebackground {}

You will likely need to add position: relative property to the style sheet for the container and/or footer elements on the page and a higher z-index so that the background sits below the other elements. The actual element needs to be determined for your template. The following are for the Protostar template.

.container, footer {position: relative; z-index: 10;}


Create a <div> at the end of the document and add a custom Joomla module position. This approach allows the image to be added through the Joomla Administrative interface via Module Manager. You can also assign the module to only appear on specific pages allowing different pages to have different images. This approach does require modifying the templateDetails.php and index.php for your template and adds a few more steps when upgrading your Joomla site.

This step requires adding a new custom module position to your template. Always make safety backups of these files before you edit the original file. You can download the files to your local computer using an FTP program and edit them in a text editor, or you can edit the files at your hosting company's file manager interface, or you can edit these files under Template Manager for your template. You will need to replace these edits if you upgrade your template.

In templateDetails.xml in your templates folder add the following in the <positions>...</positions> section:

<position>pagebackground</position>

In the index.php for your template, add the following just before the closing </body> tag:

<?php if ($this->countModules('pagebackground')) : ?>
    <div id="pagebackground">
        <jdoc:include type="modules" name="pagebackground" style="none" />
    </div>
<?php endif; ?>

Save both files back to the hosting folders in the same location.

Now edit the stylesheet for the image that you will add to the module:

#pagebackground {position: fixed; width: 100%; height: 100%; z-index: 1;top: 0px; left: 0px}
#pagebackground img {width: 100%; height: 100%;}

In Module Manager, create a new Custom HTML type module. In this module, you should see this new position listed with the other positions for your template.

Add your image in the text editor and select this new position for the module. Be sure that you do not hardcode a height or width for the image. After saving the module, toggle the text editor and check that a height or width was not added to the HTML for the <img> tag.

In the Menu Assignment tab, you can choose on which pages you want this image to appear.


Other options and things to note

You may not wish for your background image to expand in size as the screen does, you can remove the 100% and replace it with a set pixel width. This can cause issues with the horizontal screen scroll bar appearing. In this case add overflow-x: none; to the styles.

You may also need to add styling to keep the image centered in regards to the content. You can add left: 50%; margin-left: -800px; to the styles. The -800px is replaced with half the set pixel width, if you have chosen a set pixel width.


Removing the background image for mobile devices

A large background image can play havoc with your layout when viewed on a small screen of a mobile device. You can add an @media style so that the image will not appear. 

@media (max-width: 960px) {
    #pagebackground {display:none;}
}

If you just went with the image in the <body> tag, you can turn this off:

@media(max-width: 960px){
    body {background-image: none;}
}

Remember that display: none does not keep the image from being downloaded it just keeps it from being displayed. It will still slow your page load. To remove the image from the DOM and from being loaded, you will need to add JavaScript to actually keep the file from being downloaded.