CSS background Property
<!DOCTYPE html> <p>This is some text</p>
<html> <p>This is some text</p>
<head> <p>This is some text</p>
<style> <p>This is some text</p>
body { <p>This is some text</p>
background: lightblue url("img_tree.gif") no- <p>This is some text</p>
repeat fixed center;
<p>This is some text</p>
}
</style>
</body>
</head>
</html>
<body>
Definition and Usage
<h1>The background Property</h1> The background property is a shorthand
property for:
<p>This is some text</p> background-color
background-image
<p>This is some text</p> background-position
background-size
<p>This is some text</p> background-repeat
<p>This is some text</p> background-origin
background-clip
<p>This is some text</p> background-attachment
<p>This is some text</p>
It does not matter if one of the values above
<p>This is some text</p> are missing, e.g. background:#ff0000
url(smiley.gif); is allowed.
<p>This is some text</p>
<p>This is some text</p> CSS Syntax
<p>This is some text</p> background: bg-color bg-image position/bg-
<p>This is some text</p> size bg-repeat bg-origin bg-clip bg-
attachment initial|inherit;
<p>This is some text</p>
<p>This is some text</p> Note: If one of the properties in the
shorthand declaration is the bg-size
<p>This is some text</p> property, you must use a / (slash) to
<p>This is some text</p>
separate it from the bg-position property,
e.g. background:url(smiley.gif) 10px
<p>This is some text</p> 20px/50px 50px; will result in a background
image, positioned 10 pixels from the left, 20
<p>This is some text</p> pixels
from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
Note: If using multiple background-image sources but also want a background-color, the
background-color parameter needs to be last in the list.
Value Description CSS
background Specifies the background color to be used 1
-color
background Specifies ONE or MORE background images to be used 1
-image
background Specifies the position of the background images 1
-position
background Specifies the size of the background images 3
-size
Property Values
background-repeat Specifies how to repeat the background images 1
background-origin Specifies the positioning area 3
of the background images
background-clip Specifies the painting area of the background images 3
background- Specifies whether the background images are fixed or scrolls with the 1
attachment rest of the page
initial Sets this property to its default value. 3
inherit Inherits this property from its parent element. 2
CSS background-attachment Property
Example <p>The background-image is fixed. Try to scroll
down the page.</p>
A background-image that will not scroll with
<p>The background-image is fixed. Try to scroll
the page (fixed):
down the page.</p>
<html> <p>The background-image is fixed. Try to scroll
down the page.</p>
<head>
<p>The background-image is fixed. Try to scroll
<style>
down the page.</p>
body {
<p>The background-image is fixed. Try to scroll
background-image: url("img_tree.gif"); down the page.</p>
background-repeat: no-repeat; <p>The background-image is fixed. Try to scroll
down the page.</p>
background-attachment: fixed;
<p>The background-image is fixed. Try to scroll
} down the page.</p>
</style> <p>The background-image is fixed. Try to scroll
</head> down the page.</p>
<body> <p>The background-image is fixed. Try to scroll
down the page.</p>
<p>The background-image is fixed. Try to scroll
<h1>The background-attachment Property</h1> down the page.</p>
<p>The background-image is fixed. Try to scroll
down the page.</p>
<p>The background-image is fixed. Try to scroll
down the page.</p> <p>The background-image is fixed. Try to scroll
down the page.</p>
<p>The background-image is fixed. Try to scroll
down the page.</p> <p>The background-image is fixed. Try to scroll
down the page.</p>
<p>The background-image is fixed. Try to scroll
down the page.</p>
<p>The background-image is fixed. Try to scroll <p>The background-image is fixed. Try to scroll
down the page.</p> down the page.</p>
<p>The background-image is fixed. Try to scroll <p>The background-image is fixed. Try to scroll
down the page.</p> down the page.</p>
<p>The background-image is fixed. Try to scroll <p>If you do not see any scrollbars, try to resize
down the page.</p> the browser window.</p>
<p>The background-image is fixed. Try to scroll
down the page.</p>
</body>
<p>The background-image is fixed. Try to scroll
down the page.</p> </html>
CSS Syntax
background-attachment: scroll | fixed | local | initial | inherit;
Property Values
Value Description
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
local The background image will scroll with the element's contents
initial Sets this property to its default value.
inheri Inherits this property from its parent element.
t
Example
How to create a simple parallax scrolling effect (create an illusion of 3D depth):
<!DOCTYPE html>
<html> <p>In this example, we have created a fixed
background image that will disappear slowly on
<head> scroll. Scroll the page to see the effect.
<style> <strong>Note:</strong> Try to remove the
background-attachment property to really
.fixed-bg { understand this example.</p>
background-image: url("img_tree.gif");
min-height: 500px; <div class="fixed-bg"></div>
background-attachment: fixed;
background-position: center; <div style="height:800px;background-
color:yellow;">This div is only here to enable
background-repeat: no-repeat;
scrolling (height = 800 pixels).</div>
background-size: cover;
}
</body>
</style>
</html>
</head>
<body>
CSS background-blend-mode Property
<html> </head>
<head> <body>
<style>
#myDIV { <h1>The background-blend-mode
Property</h1>
width: 400px;
<div id="myDIV"></div>
height: 400px;
<p><b>Note:</b> Edge/Internet Explorer do not
background-repeat: no-repeat, repeat; support the background-blend-mode
background-image: url("img_tree.gif"), property.</p>
url("paper.gif");
background-blend-mode: lighten; </body>
} </html>
</style>
Definition and Usage
The background-blend-mode property defines the blending mode of each background layer
(color and/or image).
CSS Syntax
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|
color|luminosity;
Property Values
Value Description
normal This is default. Sets the blending mode to normal
multiply Sets the blending mode to multiply
screen Sets the blending mode to screen
overlay Sets the blending mode to overlay
darken Sets the blending mode to darken
lighten Sets the blending mode to lighten
color-dodge Sets the blending mode to color-dodge
saturation Sets the blending mode to saturation
color Sets the blending mode to color
luminosity Sets the blending mode to luminosity
CSS background-image Property
<html>
<head>
<style>
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
Definition and Usage
The background-image property sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated
both vertically and horizontally.
Tip: The background of an element is the total size of the element, including padding and
border (but not the margin).
Tip: Always set a background-color to be used if the image is unavailable.
CSS Syntax
background-image: url | none | initial | inherit;
Property Values
Value Description
url('URL') The URL to the image. To specify more than one image, separate the URLs with
a comma
none No background image will be displayed. This is default
linear- Sets a linear gradient as the background image. Define at least two colors (top to
gradient() bottom)
radial- Sets a radial gradient as the background image. Define at least two colors (center
gradient() to edges)
repeating Repeats a linear gradient
-linear-
gradient()
repeating Repeats a radial gradient
-radial-
gradient()
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Example
Use different background properties to create a "hero" image:
<!DOCTYPE html> position: absolute;
<html> top: 50%;
<head> left: 50%;
<meta name="viewport" transform: translate(-50%, -50%);
content="width=device-width, initial-
color: white;
scale=1">
}
<style>
</style>
body {
</head>
margin: 0;
<body>
font-family: Arial, Helvetica, sans-serif;
}
<div class="hero-image">
<div class="hero-text">
.hero-image {
<h1 style="font-size:50px">I am Jane
background-image:
Doe</h1>
url("/w3images/photographer.jpg");
<h3>And I'm a Photographer</h3>
background-color: #cccccc;
<button>Hire me</button>
height: 500px;
</div>
background-position: center;
</div>
background-repeat: no-repeat;
background-size: cover;
<p>Page content..</p>
position: relative;
<p>Note that this technique will also make
}
the image responsive: Resize the browser
window to see the effect.</p>
.hero-text {
text-align: center; </body>
</html>
Example
Sets a linear-gradient (two colors) as a background image for a <div> element:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h2>Linear Gradient as Background Image</h2>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support
gradients.</p>
</body>
</html>
CSS background-origin Property
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px double black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: padding-box;
}
#example2 {
border: 10px double black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 {
border: 10px double black;
padding: 25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>background-origin: padding-box (default):</h2>
<div id="example1">
<h2>Hello World</h2>
<p>The background image starts from the upper left corner of the padding edge.</p>
</div>
<h2>background-origin: border-box:</h2>
<div id="example2">
<h2>Hello World</h2>
<p>The background image starts from the upper left corner of the border.</p>
</div>
<h2>background-origin: content-box:</h2>
<div id="example3">
<h2>Hello World</h2>
<p>The background image starts from the upper left corner of the content.</p>
</div>
</body>
</html>
Definition and Usage
The background-origin property specifies the origin position (the background positioning area) of
a background image.
Note: This property has no effect if background-attachment is "fixed".
CSS Syntax
background-origin: padding-box|border-box|content-box|initial|inherit;
Property Values
Value Description
padding- Default value. The background image starts from the upper left corner of the
box padding edge
border- The background image starts from the upper left corner of the border
box
content- The background image starts from the upper left corner of the content
box
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
