CSS backgrounds


Using CSS background properties we can add:
  1. Background colours
  2. Background-images
  3. Background-text
  4. Background-position
  5. Background-repeats
  6. Background-attachments

Background colors in CSS

selector{
background-color:value;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:green;
}
</style>
<title>
CSS BACKGROUNDS
</title>
</head>
<body>
</body>
</html>

Output:

Here entire background of screen is green.
Now adding backgrounds to other HTML elements.Here we have updated previous coding.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:green;
p{
background-color:red;
}
div{
background-color:yellow;
}
</style>
<title>
CSS BACKGROUNDS
</title>
</head>
<body>
<p>HELLO WORLD</p>
<div>THIS IS DIV ELEMENT.</div>
</body>
</html>

Output:

HELLO WORLD

THIS IS DIV ELEMENT.

Background images in CSS

    Syntax
  • selector{
    background-image:url("image address");

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url("logo.jpg");
}
</style>
<title>
CSS BACKGROUNDS
</title>
</head>
<body>
</body>
</html>
After setting background images if one want to add text or media or any thing else in web page just follow the procedures as normal.

Output:

image

Repeating background images in CSS

    Syntax
  • selector{
    background-image:url("image address");
    background-repeat:repeat-x;
    }
After using this syntax image will be repeated horizontally on screen.

Repeating images vertically on screen

    Syntax
  • selector{
    background-image:url("image address");
    background-repeat:repeat-y;
    }

Non repeating background images in CSS

We must use this tag if we want image to appear only once in output.If we do not mention this image might repeated several times in background.
    Syntax
  • selector{
    background-image:url("image address");
    background-repeat:no-repeat;
    }

Background positions in CSS

We use background positions to make images align either in right or left.
    Syntax
  • selector{
    background-image:url("image address");
    background-repeat:no-repeat;
    background-position:right-top;
    }
For setting images on left top instead of right top mention left-top.Similarly one can mention other positions for other locations.

Fixing background images in CSS

    Syntax
  • selector{
    background-image:url("image address");
    background-repeat:no-repeat;
    background-position:right-top;
    background-attachment:fixed;
    }