CSS3 Background

Next ❯CSS3 Gradient

Used to define the background effects on element

  • turned_in_notBackground Properties
    • background-size
    • background-origin
    • background-clip
    • background-blend-mode
    • mix-blend-mode

Checkout background image Size
body {
 background:#c4ecc4 url('image.png') no-repeat center;
/*background-size:width height*/
 background-size:100px 80px;
 height:300px;
}
background-sizesubject
background-sizeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
  background:#c4ecc4 url('image.png') no-repeat center;
  /*background-size:width height*/
  background-size:100px 80px;
  height:300px;
}
</style>
</head>
<body>
<h1>Checkout background image Size</h1>
</body>
</html>
Try it:
background-size:100px 80px;
background-size:80px 100px;
background-size:cover;
background-size:contain;
background-size:auto;

background-origin

It specifies where the background image is positioned

padding-box:(default) the background image starts from the top left corner inside the border

border-box:the background image starts from the top left corner of the border

content-box:the background image starts from the top left corner of the content

Checkout the background position
background-origin:
#origin {
 background:#c4ecc4 url('flower.jpg') no-repeat;
 background-origin:border-box;
 border:10px dashed #E65E5E;
 padding:20px;height:300px;
}
background-originsubject
background-originclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#origin {
  background:#c4ecc4 url('flower.jpg') no-repeat;
  background-origin:border-box;  
  border:10px dashed #E65E5E;
  padding:20px;height:300px;
}
</style>
</head>
<body>
<div id="origin">
<h1>Checkout the background position</h1>
</div>
</body>
</html>

background-clip

It shows the specific area of the background. here, background position is fixed

padding-box:Shows the background portion which is inside the border

border-box:(default)Shows the background portion from the edge of the border

content-box:Shows the background portion which is covered by content

text:The background is painted within the foreground of text, in this case text color must be transparent, Only for this value some browsers don't support, so you have to use -webkit-background-clip

Checkout the showing background area
background-clip:
#clip {
 background:#c4ecc4 url('flower.jpg') no-repeat;
 background-clip:border-box;
 border:10px dashed #E65E5E;
 padding:20px;height:300px;
}
background-clipsubject
background-clipclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#clip {
  background:#c4ecc4 url('flower.jpg') no-repeat;
  background-clip:border-box;
  border:20px dashed #E65E5E;
  padding:10px;height:300px;
}
</style>
</head>
<body>
<div id="clip">
  <h1>Checkout the showing background area</h1>
</div>
</body>
</html>

Checkout the text foreground area

#clip {
 background:#c4ecc4 url('flower.jpg') no-repeat;
 background-clip:text;
 -webkit-background-clip:text; /*For chrome & some others*/
 color:transparent;
}
background-clip:textsubject
background-clipclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#clip {
  background:#c4ecc4 url('flower.jpg') no-repeat;
  background-clip:text;
 -webkit-background-clip:text;  /*For chrome & some others*/
 color:transparent;
 font-size:30px;
 text-align:center;
}
</style>
</head>
<body>
<div id="clip">
  <h1>Checkout the text foreground area</h1>
</div>
</body>
</html>

background-blend-mode

Used to blend the background layers

Checkout the background Image

Used for background Images

For More effect use Gradients

background-blend-mode:
#clip {
 background:#c4ecc4 url('flower.jpg') no-repeat;
 background-blend-mode:color-burn;
 height:300px;
}
background-blend-modesubject
background-blend-modeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#clip {
  background:#c4ecc4 url('flower.jpg') no-repeat;
  background-blend-mode:color-burn;
  height:300px;
}
</style>
</head>
<body>
<div id="clip">
  <h1>Checkout the background Image</h1>
  <p>Used for background Images</p>
</div>
</body>
</html>
Checkout the background Image

Gradient Used example

background-blend-mode:
#clip {
 background-image:url('flower.jpg'),linear-gradient(to right, #ffffcc 0%, #ff99cc 100%);
 background-blend-mode:color-burn;
 height:300px;
}
background-blend-modesubject
background-blend-modeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#clip {
 background-image:url('flower.jpg'),linear-gradient(to right, #ffffcc 0%, #ff99cc 100%);
 background-blend-mode:color-burn;
 height:300px;
}
</style>
</head>
<body>
<div id="clip">
  <h1>Checkout the background Image</h1>
  <p>Used for background Images</p>
</div>
</body>
</html>

mix-blend-mode

It will blend the current element's content with its parent background

Checkout the Image & my text

For more effect use Gradients/Images as its parent background

mix-blend-mode:
#parent{
 background-color:#dcff7f;
}
#child {
 mix-blend-mode:hard-light;
 height:200px;
}
mix-blend-modesubject
mix-blend-modeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#parent{
  background-color:#dcff7f;
  padding:20px;
}
#child {
 mix-blend-mode:hard-light;
 position:relative;
 height:200px;
 overflow:hidden;
 text-align:center;
}
</style>
</head>
<body>
<div id="parent">
  <div id="child">
    <img src="flower.jpg" style="width:100%;position:absolute;left:0;top:0;z-index:-1">
    <h1>Checkout the Image & my text</h1>
    <p>For more effect use <b>Gradients/Images</b> as its parent background</p>
  </div>
</div>
</body>
</html>

Multi Background

It allows you to add multiple background images

  • It's same as the background property, you just have to repeat the same kind of values with comma(,) between them
  • Even you can declare individual background properties, you just have to repeat the same kind of values with comma(,) between them
  • The values declared first will be shown first and so on
Syntax - To add some other background properties in one
/*background all in one 
but in this case you must declare position-x or position-y value*/

background: color image repeat position-x position-y / size attachment origin clip;
Checkout the multiple background images 
body {
/*background: 1st Values, 2nd Values,....., Nth Values*/
  background: url('whiteLeaf.png') no-repeat bottom center, url('colorLeaf.png') no-repeat bottom center,url('grass.png') no-repeat bottom center;
}
Multi backgroundsubject
Multi backgroundclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
/*background: 1st Values, 2nd Values,....., Nth Values*/
  background: url('whiteLeaf.png') no-repeat bottom center, url('colorLeaf.png') no-repeat bottom center,url('grass.png') no-repeat bottom center;
}
</style>
</head>
<body>
  <h1>Checkout the multiple background images </h1>
</body>
</html>
Try it some:
background:url('colorLeaf.png') no-repeat bottom center, url('whiteLeaf.png') no-repeat bottom center,url('grass.png') no-repeat bottom center;
background:url('whiteLeaf.png') no-repeat bottom center, url('colorLeaf.png') no-repeat bottom center,url('grass.png') no-repeat bottom center;


  • CSS3 Gradient
❮ Prev Attribute Selectors
Next ❯CSS3 Gradient
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯