CSS Background


Prev Tutorial Next Tutorial

Background

CSS background property is used to define the background effects on Html element. There are 5 CSS background properties that affects the Html elements.

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

CSS background-color

The background-color property is used to specify the background color of the Html element.

Example

<html>
<head>
<style>
h3{
background:yellow;
}
p{
background:cyan;
}
</style>
</head>
<body>
<h3>This is h3 Heading</h3>
<p>This is paragraph</p>
</body>
</html>

Result

This is h3 Heading

This is paragraph.

In above example we set the background color cyan for <p> and yellow for <h3>.

background-image

The background-image property is used to specify the image in background of the Html element.

Example

<html>
<head>
<style>
p{
background-image url(http://www.tutorial4us.com/css/sublogo.png);
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>

Result

This is paragraph.

In above example we set the background color cyan for <p> and yellow for <h3>.

CSS background-repeat

By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically. If you do not want to repeat background image then set no-repeat.

Example: repeat in x-axis

<html>
<head>
<style>
p{
background-image url(http://www.tutorial4us.com/css/files/sublogo.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>

Result

This is paragraph.

Example: repeat in y-axis

<html>
<head>
<style>
p{
background-image url(http://www.tutorial4us.com/css/files/sublogo.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</html>

Result

This is paragraph.

CSS background-position

background-position is use only in case of when you use image in background of any Html elements. It is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. You can set position of background, all background image position are given below;

  • top
  • bottom
  • center
  • left
  • right

Browser supported

Properties
backgroundYesYesYesYesYes

Prev Tutorial Next Tutorial

Advertisements
z
Download Projects

Advertisements

Download WhatsApp Status Video

Buy This Ad Space Only $50 per Month, Ad Size 300X250 Contact on: [email protected] WhatsApp no. 8882538826

Google Adsense Advertisements