Inserting Image in Background Using CSS

As in HTML we can specify any image as background for any element using CSS.
By default image is set to repeat. So, that it covers the whole element.
We can specify a background image as follows:

Check this out: http://css3wdesign.net16.net/back.html

Below is the example of a bad combination of background image and text.
http://css3wdesign.net16.net/badback.html
The text is barely readable in the above example.

Horizontal And Vertical Repeat:

By default, image is set to repeat both horizontal and vertical. But you can control this behaviour too. 

To set an image to repeat only horizontal (repeat-x):

e.g., http://css3wdesign.net16.net/repeath.html

In this link image is set to repeat only vertically (repeat-y) : http://css3wdesign.net16.net/repeatv.html

Set Position and no-repeat:

We can specify too, that whether to repeat an image or not. 

The code snippet given below will set image not to repeat. 

Sometimes we need to specify some position for an image too. 

Have a look: http://css3wdesign.net16.net/norepeat.html\

Shorthand Property:

We can manage all of these things in a single line of code:

To do so, the order of property values is:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

It doesn't matter if any of the property value is missing. 

Download all example files given above: background-image.rar

Read more

Changing Background color using CSS

Using CSS we can design our page, according to our requirements. We can change the background color or we can add some image to our background (see in the next post).
We can change the background color to whatever color we want. To do so, we must know the color name, the RGB Value of the color, the RGBA Value or HEX Value of the color, the HSL Value or the HSLA Value. We will be discussing some basics only.

Color Name

To change the background color of the whole page using color name, add the color property into the body selector like this,

We can specify any of the logical color name as the value e.g., red, yellow, green etc. 

The HEX Value

 In this pattern we specify three different value for three different colors red, green and blue followed by a # sign like this: #ff0000 (it's red). 

Code snippet is given below:

RGB Value

The RGB stands for Red, Green, Blue. As above, we mention three values for three different color in () sign followed by rgb like this: rgb (255,0,0)  /* Red */

The code snippet is given below: 

RGBA Value

RGBA value is as same as the RGB value, but with some opacity. A is an alpha parameter which specifies the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

An rgba value is specified by: rgba(red,green,blue,alpha).  e.g., 

Read more