CSS Backgrounds

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 Color

Background colors can used to decorate backgrounds. Unlike images, they are light and easy to use. Only one background color can be used in a single container. See example:

Div Wrap 1 with background red.


<style>
    .wrap1{
        width:90%; 
        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. Images like JPG, PNG and GIF can be used in backgrounds. To add a background image, use URL(path of image).


<style>
    .wrap2{
        width:90%; 
        height:200px;
        background-image:url(images/pattern.png);
        }
</style>

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

Background Repeat

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

Values of Background Repeat:

  • repeat ( By Default background is repeat )
  • no-repeat
  • repeat-x
  • repeat-y

no repeat


<style>
    .wrap3{
        width:90%; 
        height:200px; 
        background-image:url(images/favicon.ico);
        background-repeat:no-repeat;
</style>

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

repeat-x


<style>
.wrap4{width:90%; height:200px;
background-image:url(images/favicon.ico);
background-repeat:repeat-x;}
</style>

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

repeat-y


<style>
.wrap5{
    width:90%; 
    height:400px;
    background-image:url(images/favicon.ico);
    background-repeat:repeat-y;
    }
</style>

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

Background Position

Background Position Specify position of background image. By Default the position is left top.

top


<style>
    .wrap7{
        width:90%; 
        height:200px; 
        background-image:url(images/favicon.ico);
        background-repeat:no-repeat;
        background-position:top left;
        }
</style>

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

bottom



<style>
.wrap8{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:bottom;}
</style>

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

left



<style>
.wrap9{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:left;}
</style>

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

right



<style>
.wrap10{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:right;}
</style>

<div class="wrap10">
</div>

center

(How the HTML code above looks in a browser)


<style>
.wrap11{width:90%; height:200px; 
background-image:url(images/favicon.ico);
background-repeat:no-repeat;
background-position:center;}
</style>

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

Background Attachment

Background Attachment tells whether a background image scrolls or remain fixed when we scroll window. By Default it scrolls.
Two Values of Background Attachment

  • Scroll (Default)
  • Fixed

Background Attachment Fixed

This is a Heading

fixed

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.


<style>
    .wrap11{width:90%; height:200px; 
    background:url(images/box-model.png) no-repeat;
    background-attachment:fixed}
</style>

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

Background Shorthand

We Can write all background properties in one by using property background. Here is an example

(How the HTML code above looks in a browser)


<style>
.wrap11{width:90%; height:200px; 
background:url(images/box-model.png) no-repeat left top aqua;;}
</style>

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