The background-image CSS property sets one or more background images on an element.
In the following examples, we will use the "clouds.png" image as the background for the BODY or DIV elements of the website.
<style>
body {
background-image: url('clouds.png');
}
</style>
As you can see, the result is a background obtained by proportional ratio of the basic size of the image and the area of the HTML element.
If we want a different look, it can be achieved by using CSS background properties such as background-size, background-position and other properties.
By using the CSS "background-size" property, you can define the exact size you want resize default background image of an element.
<style>
body {
background-image: url('clouds.png');
background-size: 100px 50px;
}
</style>
The CSS property "background-position" enables to set a value for the horizontal and vertical position images within background.
<style>
body {
background-image: url('clouds.png');
background-position: bottom 20px right 30px;
background-size: 100px 150px;
background-repeat: no-repeat;
}
</style>
<style>
body {
background-image: url('airplane.png'), url('helicopter.png'), url('sun.png'), url('birds.png'), url('clouds.png');
background-position:top, left, center, right, bottom;
background-size:50% 80px, 30% 90px, 30% 80px, 30% 90px,50% 80px;
background-repeat: no-repeat;
}
</style>
Below are the only possible combinations for these keywords: left top left center left bottom right top right center right bottom center top center center center bottom
<style>
body {
background:
url('sky_stars.jpg') no-repeat top,
url('moon.jpg') no-repeat left 60px top 20px,
url('satellite.png') no-repeat right 60px top 20px,
url('rainbow.png') no-repeat left center,
url('sun.png') no-repeat center,
url('airplane.png') no-repeat right center,
url('helicopter.gif') no-repeat left 60px bottom 20px,
url('bird.jpg') no-repeat right 60px bottom 20px
url('tree.png') no-repeat bottom;
background-size: 20% 25%;
}
</style>
<style>
body {
background-image: url('clouds.png');
background-repeat: no-repeat;
background-position: center
background-size: cover;
height: 100%;
}
</style>
The "background-attachment" property with keyword values: fixed, scroll, local, defines whether a background image is fixed or scrolls along with the element viewport in broswer.
The background-attachment: scroll; is the behaviur "background-image" default property, when the page is scrolled, the background scrolls with it.
The background-attachment: fixed; property, will fix the background-image, and the image will not move with the rest of the document scrolls..
<style>
body {
background-image: url('clouds.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<style>
body {
background: url('images/clouds.png') no-repeat left 3px top 2px,
url('images/airplane.png') no-repeat right 3px top 2px,
url('images/sun.png') no-repeat left 2px bottom 1px,
url('images/birds.png') no-repeat right 2px bottom 1px;
background-size: 50% 50%;
}
</style>
This is how to set two background images overlap one over other for background.
Note once again, that the image of the sun has a transparent background.
<style>
body {
background: url('sun.png'), url('clouds.png');
background-repeat: no-repeat;
background-position: center;
background-size: 60% 60%, cover;
}
</style>
The CSS property "background-repeat" controls how the background image will repeat and can also stop the image from repeating.
<style>
body {
background-image: url('clouds.png');
background-repeat: no-repeat;
}
</style>
<style>
body {
background-image: url('clouds.png');
background-repeat: repeat-x;
}
</style>
<style>
body {
background-image: url('clouds.png');
background-repeat: repeat-y;
}
</style>
<style>
body {
background-image: url('clouds.png');
background-repeat: round;
background-size: 30% 30%;
}
</style>
Unlike others "background-repeat" property values, the "round" property value of the images fully corresponds to the background area ratio
(without clipping or spaces), which is the main difference between them.
This is achieved by increasing or decreasing the default size of the background image, rounding its ratio in relation to the background area.
That's why the "background-repeat: round" property is also suitable for responsive web design.
<style>
body {
background-image: url('clouds.png');
background-repeat: space;
background-size: 30% 30%;
}
</style>
In case the ratio of image size to background area is not proportional (no clipping), "background-repeat: space;" property will evenly distribute the non-covered space between the images inside the container.
The image is repeated as much as needed to cover most of the background area, without clipping an image and the first and last images always touches the edge of the container.
The size of the "space" value is difficult to control with the background-repeat property, it is possible to try with the background-position property.
<style>
body {
background-image: url('sun.png'), url('clouds.png');
background-repeat: repeat-x, repeat-y;
}
</style>
This is "sun.png" image with transparent background(no background).
In this example, we will use it to set a background that consists of a combination of red and an image.
<style>
body {
background-color: red;
background-image: url('sun.png');
background-size: 25% 50%;
}
</style>
<style>
body {
background-image: linear-gradient( red 5%, rgb(255, 240, 0, 0.25), rgb(255, 240, 0, 0.25),
green 95%), url('sun.png');
background-position: center;
background-size: cover;
}
</style>
<style>
body {
background-image: radial-gradient(rgb(255,215,0, 0.1), rgb(255,69,0, 0.8)), url('sun.png');
background-position: center;
background-size: cover;
}
</style>
<style>
body {
background-image: url('clouds.png');
opacity: 0.3;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
</style>
The CSS invert function can be used to create an invert effect on an background-image.
The function accepts a value between 0 and 1, where 0 is the original image and 1 is the fully inverted image
<style>
body {
background-image: url('clouds.png');
filter: invert(0.9);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
</style>
The blurry background can be created using the "filter" property with blur() CSS function.
Add filter: blur() to apply a blurred effect to an image.
the argument defines how many pixels on the screen blend into each other, so a larger value will create a more pronounced blurred effect.
A larger value will create more blur. blur radius
<style>
body {
background-image: url('clouds.png');
filter: blur(5px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<style>
body {
background-image: url('clouds.png');
}
</style>
<style>
body {
background-image: url('clouds.png');
}
</style>