CSS Backgrounds

  • Home -
  • Web Development
  • CSS
Previous
Next

What is CSS Background?

To define background effects for elements, the CSS background properties used.

Properties of CSS Background :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

CSS Background-Color

The background color property specifies an element's background colour.

Exampe:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>

</html>

Output:

Hello World!

This page has a light blue background color!

 

 

A color is specified with CSS most often:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"

 

Example:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<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>
</body>
</html>

Output:

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

 

CSS Background-Image

The image background property specifies an picture to be used as an element background.

The image is repeated by default so that it covers the whole element.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>

Output:

Hello World!

This page has an image as the background!

 

 

Example:

This example shows a bad text and background image combination. The text can not be read:


<!DOCTYPE html>

<html>
<head>
<style>
body {
background-image: url("https://ukacademe.com/Images/Examples/baground-image2.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>

Output:

Hello World!

This text is not easy to read on this background image.

 

Note: Use those picture that does not disturb the text when using a background picture.

 

CSS Background-Repeat

The background picture property repeats an picture horizontally as well as vertically by default. Some pictures should only be repeated horizontally or vertically or they will seem odd:

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://ukacademe.com/Images/Examples/baground-image3.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>

Output:

Hello World!

Strange background image...

Strange background image...

Strange background image...

Strange background image...

Strange background image...

 

 

The background will look better if the above picture is repeated horizontally only (background repeat: repeat-x ;)

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://ukacademe.com/Images/Examples/baground-image3.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>

Output

Hello World!

Here, a background image is repeated only horizontally!

Here, a background image is repeated only horizontally!

Here, a background image is repeated only horizontally!

Here, a background image is repeated only horizontally!

 

To repeat an image vertically, set background-repeat: repeat-y;

 

CSS Background-Repeat: No-repeat

The background image is only shown once by the background-repeat property

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://ukacademe.com/Images/Examples/baground-image4.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>UK Academe background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>

Output:

Hello World!

UK Academe background image example.

The background image is only showing once, but it is disturbing the reader!



 

The background image in the example above is located in the same spot as the text. We want to change the image position so that the text doesn't too much disturb it.

 

 

CSS Background-Position

The position of the Background Image is specify by the background position property.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://ukacademe.com/Images/Examples/baground-image4.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>UK Academe background no-repeat, set position example.</p>
<p>The background picture is now only displayed once, and placed away from the text.</p>
<p>We have added a margin on the right side in this instance, so the background picture never disturbs the text.</p>
</body>
</html>

Output:

Hello World!

UK Academe background no-repeat, set position example.

The background picture is now only displayed once, and placed away from the text.

We have added a margin on the right side in this instance,

so the background picture never disturbs the text.

 

CSS Background-Attachment

The background attachment property specifies whether to scroll or to fix (won't scroll with the remaining page) the background image.

Example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://ukacademe.com/Images/Examples/baground-image4.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background attachment property specifies whether to scroll or to fix (won't scroll with the remaining page) the background image..</p>
<p><strong>Tip:</strong> Try resizing the browser window if you do not see any scrollbars.</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 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 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 down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

 

CSS Background - Shorthand Property

In order to shorten the code, all background properties in one property can also be specified: it is referred to as a shorthand property.

The shorthand property for background is background.

Example:

Use the shorthand property to make one declaration of all background properties:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("https://ukacademe.com/Images/Examples/baground-image4.jpg") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for all background properties to be entered in a single declaration.</p>
<p>We can see, The background picture is only displayed once here, and is also located in the top right-hand corner. </p>
<p>We have also added a right margin in order to prevent the text from writing over the background picture.</p>
</body>
</html>

Output:

The background Property

The background property is a shorthand property for all background

properties to be entered in a single declaration.

We can see, The background picture is only displayed once here,

and is also located in the top right-hand corner.

We have also added a right margin in order to prevent the text from writing over

the background picture.

 

Remember Point:

The order of the property values is: when using the shorthand property:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

It doesn't matter whether any of the property values are absent, provided the others are in this sequence.

 

Previous
Next

Course Reviews