CSS Backgrounds
CSS Backgrounds
This is the lesson 4 of 4 in the course CSS - Beginner to Advance

Hi πŸ‘‹ fellow coders. CSS backgrounds properties define the background for HTML elements. Background can be a solid color, gradient, an image.

Table of Contents

In CSS, there are nine backgrounds properties:

  • background-color
  • background-image
  • background-position
  • background-reapeat
  • background-attachement
  • background-clip
  • background-origin
  • background-size
  • background (This property is the shorthand for all the above properties)

CSS background-color property

The CSS background-color property defines the background color of an HTML element.

Example

We can set the backgrounds color of a paragraph like below:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: red;
}
</style>
</head>
<body>

<p>This paragraph has a red backgroud color.
Try to change the background color from red to blue.
</p>

</body>
</html>

In CSS, we can define a color value with the color name, HEX, RGB, and HSL. To learn more about CSS colors look at CSS Colors | CSS- Beginner to Advance lesson.

CSS Opacity property

In CSS, The opacity property takes a value between 0.0 (fully transparent) and 1.0 (fully visible) and defines the opacity/transparency of an HTML element.

Opacity 1
Opacity 0.5
Opacity 0.1

Example

We can set the opacity of the div HTML element like below:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

.opacity-01 {
  opacity: 0.1;
}

.opacity-04 {
  opacity: 0.4;
}

.opacity-07 {
  opacity: 0.7;
}

.opacity-1 {
  opacity: 1;
}

</style>
</head>
<body>
  
<div class="opacity-01">
  <h1>Opacity is 0.1</h1>
</div>

<div class="opacity-04">
  <h1>Opacity is 0.4</h1>
</div>

<div class="opacity-07">
  <h1>Opacity is 0.7</h1>
</div>

<div class="opacity-1">
  <h1>Opacity is 1</h1>
</div>

</body>
</html>

Note: When we use the opacity property on an HTML element, all of its child element inherits the same opacity/transparency. Hence the text inside the fully transparent element will be hard to read. As you can see in the above example.

CSS background-image property

In CSS, We use the background-image property to set an image as the background of an HTML element.

body {
  background-image: url("url/of/image");
}

We use CSS url() function for the background-image property value.

The CSS url() function takes a string as an argument. This string is a link to the image.

Example

Let’s set an image as the background of the body element:

<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
  body {
    height: 400px;
    background-image: url('https://picsum.photos/200');
  }
</style>
</head>
<body>
  <h1>I am a Heading</h1>
</body>
</html>

CSS background-repeat property

The CSS background-repeat property defines how the background image should be repeated or not repeated at all.

background-repeat: repeat/repeat-x/repeat-y/no-repeat/space/round;

/* The background-repeat property also have 2 value syntax */
background-repeat: horizontal vertical;

CSS background-repeat property can have these possible values:

ValueDescription
repeatrepeats the image horizontally (x-axis) and vertically (y-axis). It is the default option.
repeat-xrepeat the image horizontally (x-axis)
repeat-yrepeat the image vertically (y-axis)
no-repeatdon’t repeat. It shows the image once
spacethe image is repeated on both axes as much as possible without clipping
roundas the space increase, the images will stretch on both axes without clipping. Once there is enough space for the new image, all the images compress back to their original size and the new image is added
possible values for the background-repeat property

The background-repeat property also has the tow-value syntax:

background-repeat: horizontal vertical;

The first value will be applied to the x-axis (horizontal) and the second value to the y-axis (vertical).

Example

Run the below code and see the output:

<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
 body {
  background-image: url("https://picsum.photos/200");
  background-repeat: space round; /* Here we used the tow-value syntax */
}
</style>
</head>
<body>
  <h1>I am a Heading</h1>
</body>
</html>

CSS background-position property

The CSS background-position property sets the position of the background image.

The background-position property takes two values:

background-position: left bottom;

Example

Run the below code and see the output

<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
 body {
  background-image: url("https://picsum.photos/200");
  background-repeat: no-repeat;
  background-position: left top;
}
</style>
</head>
<body>
  <h1>I am a Heading</h1>
</body>
</html>

CSS background-attachment property

The background-attachment property defines whether the background image should be scrolled with the page or be fixed.

Run the below code and see the output:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("https://picsum.photos/200");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
  background-attachment: fixed;
}
</style>
</head>
<body>
<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>

Now try to change the background-attachment property value from fixed to scroll.

CSS background property

The CSS background property is the shorthand property for all the CSS background properties.

Instead of writing:

body {
background-color: #fff;
background-image: url("https://picsum.photos");
background-repeat: no-repeat;
background-position: right top;
}

We can write:

body {
background: #fff url("https://picsum.photos") no-repeat right top;
}

The background property value order is:

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

It doesn’t affect if one value is missing as long as other values are in order.

All the CSS Background property

PropertyDescription
backgroundDefines all the background properties in one declaration
background-attachmentDefines if the background image is fixed or scrolls with the page
background-clipDefines the background image painting area
background-colorDefines the background color of the HTML element
background-imageDefines the background image for the HTML element
background-originDefines the background image origin
background-positionDefines the starting position of the background image
background-repeatDefines how the background image is repeated or not repeated at all
background-sizeDefines the size of the background image
All CSS Background Properties

And with that said, this lesson ends here. Friends, It takes time and hard work to write these lessons, so if you find this lesson helpful then please share it with your friends.

Until next time πŸ‘‹

Course Navigation<< CSS Colors | CSS- Beginner to Advance
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply