Scribd
Upload
40 views

CSS Background Property: Definition and Usage

The document discusses the CSS background property, which is a shorthand property for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It provides syntax and examples for using the background property to set background images and colors on elements. It also covers individual background properties like background-attachment and how they can be used to control whether a background image scrolls or is fixed when scrolling.

Uploaded by

Jaysie Fernandez
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views

CSS Background Property: Definition and Usage

The document discusses the CSS background property, which is a shorthand property for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It provides syntax and examples for using the background property to set background images and colors on elements. It also covers individual background properties like background-attachment and how they can be used to control whether a background image scrolls or is fixed when scrolling.

Uploaded by

Jaysie Fernandez
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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. 

You might also like