Now for the right way to do it. Here is the contents of the 'ALT' templates common.css located in the /templates/tmpl_alt/css folder, relative to your sites root folder.
@import url(../../base/css/common.css);
body {
background-image:url(../images/clouds.png);
background-repeat:repeat;
}
The 'cloud image is located in the /templates/tmpl_alt/images folder, and this is where you should upload any different image you'd like to use. Don't upload a different image and rename it to clouds.png... that makes no sense at all. For a repeating background image, change the file name of the image in common.css to reflect the name of the image you want to use.
To use a solid color, do this:
@import url(../../base/css/common.css);
body {
background-color:#000033;
}
To do something like a gradient, do this:
@import url(../../base/css/common.css);
body {
background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
To change the direction of the gradient, use a different value for 90deg (0deg. 180deg, 270deg)
To use a single background image that covers the whole page, use something like this:
body {
background-color:#000000 ;
background-image: url('../images/BigAssImage.jpg');
background-repeat:no repeat;
background-position:top left;
background-attachment: fixed;
background-size:100% auto;
margin:0px;
}
background-attachment: fixed; Background image remains stationary
background-attachment: scroll; Background image scrolls with content
My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.