Published on: 12 August, 2013

CSS Background

Posted by andy | 1473 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

CSS Background in css allows you to set the background of an element, it can be an image or background color or event the combination and image and color.

See the following example:

//first example by using background element
.samplebox{
    background:url(images/desert.jpg);
    width:200px;
    height:200px;
}

//second example by using background-image element
.samplebox{
    background-image:url(images/desert.jpg);
    width:200px;
    height:200px;
}

So what is the difference between "background" and "background-image"?

Well the background attribute allows you to combine the image with the background color if you have. Also you can use the background position and background repeat combined on this element as well. See below example:

/* first example by using background element */
.samplebox{
    background:url(images/desert.jpg) #ccc left center no-repeat;
    width:200px;
    height:200px;
    border:solid 1px #000000;
}

/* this is when you separated each individual attributes */
.samplebox{
    background-image:url(images/desert.jpg); 
    background-position: left top;
    background-repeat:no-repeat;
    background-color:#ccc;
    width:200px;
    height:200px;
    border:solid 1px #000000;
}

If you specify the url of an images take a look carefully at the path of the image, if you try to target to the root of the folder, always remember to include / at the front of the image path. Otherwise, css will reference the path of the same location where the css file is located.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.