CSS Background

Advertisements

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

Google Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements