Changing the background image

RSLens! offers a wide range of customization options designed to aid you in getting your desired results in terms of looks and functionality. However, there are some modifications that cannot be currently made using the template's default features, like changing the background image.


Here's how you can do this: using a developer tool like Firebug - for Mozilla Firefox - or something similar, inspect the element and have a look at the <body> container's CSS definitions. Depending on the You will find the following class, in the template.css file:

 
body.site {
    background: url("../images/bg.jpg") no-repeat fixed center top rgba(0, 0, 0, 0);
}
 

As you can see, the template's default background is found in its images folder and is called bg.jpg. RSLens! includes a feature that allows you to adjust the template's CSS without modifying the original CSS files:


  • Copy the new background image that you wish to use in the /templates/rslens/images folder
  • Head to /templates/rslens/css, create a file called custom.css and edit it
  • Add the following code in the newly created file:

 
body.site {
    background: url("../images/new_background.jpg") no-repeat fixed center top rgba(0, 0, 0, 0);
}
 
  • Save the changes to the file and refresh one of your website's pages, you will notice that the background has been changed

Important: Remember to replace new_background.jpg with the actual name of the new background image file.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

How do I make CSS overrides for Joomla! components

How to modify RSLens!'s style without changing the source code

How do I create a template override

How do I change the favicon image

How to enable displaying sub-menu items