Scribd
Upload
959 views

CSS Background

The CSS background properties allow you to define and style the background of elements. Some key background properties include background-color to set the background color, background-image to add an image, and background-repeat to control how the image is repeated. Background position and attachment can also be used to control the positioning and scrolling behavior of background images. Multiple backgrounds can also be applied by specifying more than one image with the background-image property.

Uploaded by

raghuraman36
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
959 views

CSS Background

The CSS background properties allow you to define and style the background of elements. Some key background properties include background-color to set the background color, background-image to add an image, and background-repeat to control how the image is repeated. Background position and attachment can also be used to control the positioning and scrolling behavior of background images. Multiple backgrounds can also be applied by specifying more than one image with the background-image property.

Uploaded by

raghuraman36
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS Backgrounds

The CSS background properties are used to


define the background effects for elements.
CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
CSS background-color
The background-color property specifies the
background color of an element.
Example: Output:
<style>
body {
background-color: lightblue;
}
</style>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
CSS background-color
Example: Output:
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
CSS background-image
• The background-image property specifies an image to
use as the background of an element.
• By default, the image is repeated so it covers the
entire element.
Example: Output:
<style>
body {
background-image: url("paper.gif");
}
</style>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
CSS background-repeat
• By default, the background-image property repeats an image both
horizontally and vertically.
• Some images should be repeated only horizontally or vertically, or
they will look strange, like this:
Example:
<style>
body {
background-image: url("gradient_bg.png"); Output:
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>
CSS background-repeat: no-repeat
Example:
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once,
but it is disturbing the reader!</p>
CSS background-position
Example:
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
margin-right: 200px;
} </style>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and
positioned away from the text.</p>
<p>In this example we have also added a margin on the right
side, so the background image will never disturb the text.</p>
CSS background-attachment
Example:
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
} </style>

background-attachment: fixed;
CSS background - Shorthand property
• It is also possible to specify all the background properties in one
single property. This is called a shorthand property.
• The shorthand property for background is background.

Example:
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
CSS Multiple Backgrounds
• CSS allows you to add multiple background images for an element,
through the background-image property.
• The following example has two background images, the first image
is a flower (aligned to the bottom and right) and the second image
is a paper background (aligned to the top-left corner):
Example:
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
CSS Multiple Backgrounds
Example:
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif)
left top repeat;
padding: 15px;
}
</style>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

You might also like