How do I add a solid color background?

I am using the alt template with the blue and white "clouds."

This is beautiful, but a little too common. Keeping this template, how can I convert the background to either a solid color (probably dark blue or black), or perhaps a tiled background?

Thank you.

Quote · 15 Jun 2015

You need to replace the clouds picture by going to the folders of template > tmpl_alt > images. Rename the new picture with clouds.

clear cache and public cache. Done :)
P.S remember to choose same or bigger size image.

Umar Haroon
Quote · 15 Jun 2015

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.
Quote · 15 Jun 2015

Thank you! This should keep me busy for a while. :)

Quote · 15 Jun 2015
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.