How to add images in CSS Background

CSS can use both colors and images in backgrounds. CSS3 Gradients were introduced later on, and they behave same like backgrounds images.

Background colors can have any colorname, hexacode or rgb color code. Even we can use HSL colors in backgrounds. Background Colors occupy full width of Border Box.

Background images are also used with background. Images like JPG, PNG and GIF can be used as background images. These images can repeat in x-axis, y-axis or no repeat, can change position and can be attached fixed to screen.

Background Properties


Background Color

Background color property is used to change background color. Background color can have either color name or color code. Only one background color can be used for a single element. See example:

Div Wrap 1 with background red.


<style>
    .wrap1{
        height:100px;
        background-color:red;
    }
</style>

<div class="wrap1">
    <p>Div Wrap 1 with background red.</p>
</div>


Background Image

Background images are also used to set backgrounds in css. Popular image extension like, JPG, PNG, GIF and svg can be used for background images. To set background image, use URL(path of image). see example


<style>
    .wrap2{
        height:100px;
        background-image:url(images/bg.png);
    }
</style>

<div class="wrap2"></div>

Background Repeat

Background repeat property controls repetition of a background image. Default value of background repeat is repeat. Other values are:

Background repeat values

Repeat

Repeat is the default value of all background images. All background images will repeat in both x and y direction to cover whole area. See example



<style>
    .wrap3{
        height:100px; 
        background-image:url(images/);
        background-repeat:repeat;
    }
</style>

<div class="wrap3">
</div>

No Repeat

background-repeat: no-repeat can stop image from repeating in x and y direction of background. Thus remaining area is transparent. But we can add background color in remaining transparent area.


<style>
    .wrap4{
        height:100px; 
        background-image:url(images/bg.png);
        background-repeat:no-repeat;
</style>

<div class="wrap4">
</div>

Repeat-x

repeat-x will repeat background image in x axis only.



<style>
.wrap5{
    height:200px;
    background-image:url(images/bg.png);
    background-repeat:repeat-x;
}
</style>

<div class="wrap5">
</div>

Repeat-y

repeat-y can repeat background image in y axis only.



<style>
.wrap6{
    height:200px;
    background-image:url(images/favicon.ico);
    background-repeat:repeat-y;
    }
</style>

<div class="wrap6">
</div>

Background Position

Background Position tells position of background image. The default the background position is left top.

background position can have two values, one for x-axis and second for y-axis. These values can be left, right and center for x-axis, and top, center and bottom for y-axis. px and % cam also be used.


<style>
.wrap7{
    height:200px;
    background-image:url(images/bg.png);
    background-repeat:no-repeat;
    background:color:#ddd;
    background-position:left top;
    }
</style>

<div class="wrap7"></div>

Change Background Position

Position-x:
Position-y:

Background Attachment

Background Attachment property tells whether a background image should scroll or remain fixed on scrolling down window. The default value is scroll.

Background Attachment Values

Background Attachment Scroll

Background-attachmnet scroll is default value of all background images. These images scroll when browser windows scroll.


<style>
.wrap8{ height:200px; 
    background-image:url(images/box-model.png)
    background-attachment:scroll;
}
</style>

<div class="wrap8"></div>

Background Attachment Fixed

Background-position fixed is another value of background attachment which fixed the background image. While scrolling, image remain fixed and content slides on it making parallax effect.


<style>
.wrap9{ height:200px; 
    background-image:url(images/box-model.png)
    background-attachment:fixed;
}
</style>

<div class="wrap9"></div>

Background

The background property is actually a shortcut of background-image, background-repeat, background-position, background-attachment and background-color. This is the most preferred way to change background properties as a single property can change five properties. See example


<style>
.wrap11{
    height:200px; 
    background:url(images/box-model.png) repeat left top fixed #ccf;
}
</style>

<div class="wrap11"></div>

Related Articles

  1. CSS Gradients
  2. CSS3 Backgrounds