CSS Background

Next ❯CSS Border

Used to define the background effects on element

  • turned_in_notBackground Properties
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position-x
    • background-position-y
    • background-position
    • background
Checkout the body background
body {
  background-color: #4ec7ef;
}
background-colorsubject
background-colorclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background-color: #4ec7ef;
}
</style>
</head>
<body>
<h1>Checkout the body background</h1>
</body>
</html>

More Example:

h1 {
  background-color: #4ec7ef;
}
div {
  background-color: lightblue;
}

To change the background color of an element

Checkout the body background image
body {
  background-image: url('images/flower.jpg');
}
background-imagesubject
background-imageclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
    background-image: url('images/flower.jpg');
}
</style>
</head>
<body>
<h1>Checkout the body background</h1>
</body>
</html>
Note:

If you are showing text on image then, use images which will not disturb the text

Checkout the body background image
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
}
background-repeatsubject
background-repeatclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Checkout the body background image </h1>
</body>
</html>
Try it all:
background-repeat:repeat-x;
background-repeat:repeat-y
background-repeat:round
background-repeat:space
background-repeat:no-repeat
Checkout the body background image

body {
  background-image: url('images/flower.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
}
background-attachmentsubject
background-attachmentclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background-image: url('images/flower.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
}
</style>
</head>
<body>
<h1>Checkout the body background image </h1>
</body>
</html>
Try it all:
background-attachment:scroll;
background-attachment:fixed
Checkout the body background image
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
  background-position-x: center;
}
background-position-xsubject
background-position-xclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
  background-position-x: center;
}
</style>
</head>
<body>
<h1>Checkout the body background image </h1>
</body>
</html>
Try it some:
background-position-x:left
background-position-x:right
background-position-x:80%
background-position-x:40px
Checkout the body background image
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
  background-position-y: center;
}
background-position-ysubject
background-position-yclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
  background-position-y: center;
}
</style>
</head>
<body>
<h1>Checkout the body background image </h1>
</body>
</html>
Try it some:
background-position-y:top
background-position-y:bottom
background-position-y:-40px
background-position-y:25px
Checkout the body background image
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
/*background-position: position-x position-y;*/
  background-position: center;
}
background-positionsubject
background-positionclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background-image: url('images/leaf.png');
  background-repeat: no-repeat;
/*background-position: position-x position-y;*/
  background-position: center;
}
</style>
</head>
<body>
<h1>Checkout the body background image </h1>
</body>
</html>
Try it some:
background-position:right top
background-position:bottom left
background-position:80% 20px
Checkout the body background image
body {
/*background: color image repeat attachment position-x position-y*/
  background: #4ec7ef url('images/flower.jpg') no-repeat scroll top right;
}
background (All-in-One)subject
background (All-in-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
/*background: color image repeat attachment position-x position-y*/
 background: #4ec7ef url('images/flower.jpg') no-repeat top right;
}
</style>
</head>
<body>
<h1>Checkout the body background image </h1>
</body>
</html>
Try it some:
background:#4ec7ef url('images/leaf.png') no-repeat scroll right;
background:#639ed7 url('images/leaf3.png') no-repeat scroll left;
background:#f3f3f3 url('images/leaf2.png') no-repeat scroll right;
background:#4ec7ef url('images/flower.jpg') no-repeat top right;


  • CSS Border
❮ Prev Ways To Add CSS
Next ❯CSS Border
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯