- Basic of CSS | CSS- Beginner to Advance
- CSS Comments | CSS- Beginner to Advance
- CSS Colors | CSS- Beginner to Advance
- CSS Backgrounds | 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
- CSS background-color property
- CSS background-image property
- CSS background-repeat property
- CSS background-position property
- CSS background-attachment property
- CSS background property
- All the CSS Background property
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.
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:
| Value | Description |
|---|---|
| repeat | repeats the image horizontally (x-axis) and vertically (y-axis). It is the default option. |
| repeat-x | repeat the image horizontally (x-axis) |
| repeat-y | repeat the image vertically (y-axis) |
| no-repeat | don’t repeat. It shows the image once |
| space | the image is repeated on both axes as much as possible without clipping |
| round | as 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 |
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
| Property | Description |
|---|---|
| background | Defines all the background properties in one declaration |
| background-attachment | Defines if the background image is fixed or scrolls with the page |
| background-clip | Defines the background image painting area |
| background-color | Defines the background color of the HTML element |
| background-image | Defines the background image for the HTML element |
| background-origin | Defines the background image origin |
| background-position | Defines the starting position of the background image |
| background-repeat | Defines how the background image is repeated or not repeated at all |
| background-size | Defines the size of the background image |
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 👋
