CSS Background Properties

CSS Background properties like background-color, background-image, background-position, background-repeat, background-attachment properties and many more.

Here are some CSS Background properties listed with example.

CSS background-color

CSS background-color property set background color.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS background-color property</title>
</head>
<body>
  <p style="background-color: orange;">This text background color orange.</p> 
</body>
</html>

Run it... »

CSS background-image

CSS background-color property set background color.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS background-image property</title>
</head>
<body>
  <p style="background-image:url(../../images/img_nat.png); color:#FFFFFF; height:130px; width:200px; font-size:20px;">This text element set background image.</p> 
</body>
</html>

Run it... »

CSS background-repeat

CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS background-repeat property</title>
</head>
<body>
  <p style="background-image:url(../../images/img_nat.png); height:120px; background-repeat: no-repeat;">This element represent background-repeat property.</p> 
</body>
</html>

Run it... »

CSS background-attachment

CSS background-attachment property use to set background image in different type attachment like fixed, scroll.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS background-attachment property</title>
</head>
<body>
  <p style="background-image: url(../../images/img_nat.png); height: 130px; width: 200px; overflow: scroll; background-attachment:fixed; color: white;">This element represent background-attachment property. It means image does not moved only fixed attached a image. background attachment possible value fixed or scroll. you can use this value and display results.This example is Background attachment image is fixed means image does not moved only fixed attached a image. background attachment possible value fixed or scroll. you can use this value and display results.</p> 
</body>
</html>

Run it... »

CSS background-position

CSS background-position property use to set background image in different type position like left, right, center, top, bottom.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS background-position property</title>
</head>
<body>
  <p style="background-image:url(../../images/img_nat.png); height:120px; background-repeat: no-repeat; background-position: 150px;">This element represent background-position property.</p>
</body>
</html>

Run it... »