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 basic background-position property is set using a length for the horizontal and vertical position.
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-position: bottom 20px right 30px;
background-size: 100px 150px;
background-repeat: no-repeat;
}
</style>
<style>
body {
background-image: url('clouds.png');
background-repeat: no-repeat;
background-position: center
background-size: cover;
height: 100%;
}
</style>
<style>
body {
background-image: url('clouds.png');
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>
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: 100px 75px;
padding: 10px;
}
</style>
<style>
body {
background-image: url('clouds.png');
background-repeat: space;
background-size: 100px 75px;
padding: 20px;
}
</style>
<style>
body {
background-image: url('sun.png'), url('clouds.png');
background-repeat: repeat-x, repeat-y;
}
</style>
<style>
body {
background-image: url('clouds.png');
}
</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-color: red;
background-image: url('sun.png');
background-size: 25% 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>
<style>
body {
background-image: url('clouds.png');
}
</style>
<style>
body {
background-image: url('clouds.png');
}
</style>
<style>
body {
background-image: url('clouds.png');
}
</style>
<style>
body {
background-image: url('clouds.png');
}
</style>