CSS Background

CSS Background

To set the background effects of your website, you need to work on the CSS background properties. Through these properties, you can set an image as a background, or add a color to the background. With that, also set the position of image, repeat an image, etc.

Let us first see an example with these properties,

CSS Background Example

Here’s an example of CSS background property and how to set values. We have used CSS properties background-color, background-image, background-repeat, and background–position. But, when you want to add all of them, use only the background,

Here’s the output,

CSS Background Example

Let us now learn one by one about the properties we used in the above example,

CSS background-color property (Change Background Color)

Change the background color of your web page with the CSS background-color property. For adding CSS color, use the color name, HEX color, or RGB color.

Learn how to set color in CSS.

Let’s see an example to set background color using background-color property,

Here’s the output,

CSS Background Color

CSS background-image property (Set Background Image)

Change the background image of your web page with the CSS background-image property. In this set the image to be used as the background.

The url attribute is used here to set the source of the image.

Let’s see an example to set background image. By default the image will repeat to cover the web page. Here, our background image is visible four times on the page to cover it.

Here’s the output,

CSS Background Image example

 

CSS background-repeat property (Background Image Repeat)

With the CSS background-repeat property, the image repeats vertically or horizontally.

To repeat the image horizontally, use

To repeat the image vertically, use

If you want to show the image only once, then

Let’s see an example to repeat the background image horizontally,

Here’s the output,

CSS background-image property (Background Image Position)

With CSS, you can also set the background image. Let’s say, you want it on the left, then use the CSS background-image property with the left value,

Let’s see an example to set the background image position,

Here’s the output,

CSS Background Image Position

In this lesson, we learned how to work with CSS background property. The background color, image, position, etc can be set using this property.

CSS Colors
CSS Icons
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment