Single Background Image

These instructions tell you hgow to change the background images as there are a couple ways of doing it and they do not work for every template as they are slighty different, ie not all have a background image position that is visible.

Module Method

This method utilises the JSN Background Module position and can be easy to use.

https://www.joomlashine.com/forum/74-jsn-metro/108636-background-image-only-on-frontpage

Please follow my instructions below:

1. Go to Component -> Banners -> Categories then create a new Category and name 'Category Background' .
2. Go to Component -> Banners -> Banner then create a new banner and name 'Banner Background' . Upload new image to make background http://take.ms/0dUyRz . Look at option named 'Category' and select 'Category Background' . http://take.ms/k4244Y
3. Go Module manager then create a new module with 'Banner type'. http://take.ms/gxzAn
4. Set the module in 'background' position . http://take.ms/CZyiv .
5. Look at option named 'Category' and select 'Category Background' . http://take.ms/CZyiv .
6. Please re-check .

Does not work for:

• Metro
• Solid

CSS Method

In order to get the background image for the JSN template solidand others you can use the following method that is purley CSS.

1. Place background image in 'templates/jsn_solid_pro/images/backgrounds' folder .
2. Open the lancastrian.css file in 'templates/jsn_solid_pro/css' folder .
3. Then insert the following code below at the end of the file .

   /* Set Background Image */
   #jsn-master {
       background: url("../images/backgrounds/bg-body.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   }

    

Q: does this mean the background position in solid is pointless?
A: Yes, the background position in solid is pointless .

Other

/* Repeating Custom Background */
#jsn-master {
    background:url("../images/tile.jpg") repeat scroll 0 0 transparent ;
}

/** Custom background but leave inner white **/
#jsn-page {background: url("../images/custom/background.jpg") no-repeat fixed center;}

/* remove white background */
#jsn-header_inner,
#jsn-headerright,
#jsn-footer {
    background: none;
}

/* make content background white */
#jsn-content, #jsn-header_inner2 {background: white;}

/* make footer black */
#jsn-footer_inner {background: #111111;}

#jsn-master {
    /*background-color: #fff;*/
    background: url(../images/lancastrian/main-background-tile.jpg) repeat;
    background-size: none;
    /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='templates/jsn_nuru_pro/images/colors/brown/bg.jpg',
    sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='templates/jsn_nuru_pro/images/colors/brown/bg.jpg',
    sizingMethod='scale')";*/
}

/* make all backgrounds yellow */
body,
#jsn-header,
#jsn-content,
#jsn-content #jsn-maincontent,
#jsn-content #jsn-leftsidecontent,
#jsn-content #jsn-rightsidecontent {
    background-color: #FFFFCA;
}

 This is from Sweet Smiles with the Hood

/* Background image */
#jsn-page {
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.jsn-color-green #jsn-page {
    background-image: url(../custom/images/bgmaster.png);
}