CSS Background Image Size and Positions EXAMPLES
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.
EXAMPLE
<style>
body {
background-image: url('clouds.png');
}
</style>
result:
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.
The background-size CSS property
By using the CSS "background-size" property, you can define the exact size you want resize default background image of an element.
EXAMPLE
<style>
body {
background-image: url('clouds.png');
background-size: 100px 50px;
}
</style>
result:
The background-position CSS property
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.
EXAMPLE
<style>
body {
background-image: url('clouds.png');
background-position: bottom 20px right 30px;
background-size: 100px 150px;
background-repeat: no-repeat;
}
</style>
result:
result
result
CSS Background Image Full Screen
EXAMPLE
<style>
body {
background-image: url('clouds.png');
background-repeat: no-repeat;
background-position: center
background-size: cover;
height: 100%;
}
</style>
result:
The background-attachment Property
EXAMPLE
<style>
body {
background-image: url('clouds.png');
background-size: cover;
}
</style>
result:
Multiple CSS Background Image
EXAMPLE
<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>
result:
Background Image with "background-repeat" CSS property
The CSS property "background-repeat" controls how the background image will repeat and can also stop the image from repeating.
EXAMPLE
how set background-image to stop repeated
<style>
body {
background-image: url('clouds.png');
background-repeat: no-repeat;
}
</style>
result:
EXAMPLE
how to set background-image to repeated horizontally
<style>
body {
background-image: url('clouds.png');
background-repeat: repeat-x;
}
</style>
result:
EXAMPLE
how to set background-image to repeated vertically
<style>
body {
background-image: url('clouds.png');
background-repeat: repeat-y;
}
</style>
result:
EXAMPLE
how to set background-image to repeated round
<style>
body {
background-image: url('clouds.png');
background-repeat: round;
background-size: 100px 75px;
padding: 10px;
}
</style>
result:
EXAMPLE
how to set background-image to repeated space
<style>
body {
background-image: url('clouds.png');
background-repeat: space;
background-size: 100px 75px;
padding: 20px;
}
</style>
result:
EXAMPLE
how to set background-image repeated horizontally and vertically in combination
<style>
body {
background-image: url('sun.png'), url('clouds.png');
background-repeat: repeat-x, repeat-y;
}
</style>
result:
Using linear-gradient backgrounds
EXAMPLE
<style>
body {
background-image: url('clouds.png');
}
</style>
result:
image image
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.
EXAMPLE
<style>
body {
background-color: red;
background-image: url('sun.png');
background-size: 25% 50%;
}
</style>
result:
<style>
body {
background-color: red;
background-image: url('sun.png');
background-size: 25% 50%;
}
</style>
result:
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.
EXAMPLE
<style>
body {
background: url('sun.png'), url('clouds.png');
background-repeat: no-repeat;
background-position: center;
background-size: 60% 60%, cover;
}
</style>
result:
Transparent background-image with CSS "opacity" property
EXAMPLE
<style>
body {
background-image: url('clouds.png');
}
</style>
result:
how to create a blurry background-image with CSS
EXAMPLE
<style>
body {
background-image: url('clouds.png');
}
</style>
result:
Overlay effect to Background Image Using CSS
EXAMPLE
<style>
body {
background-image: url('clouds.png');
}
</style>
result:
How to set a Responsive Full Background Image Using CSS
EXAMPLE
<style>
body {
background-image: url('clouds.png');
}
</style>
