CSS Background Images
Written By: Avinash Malhotra
Last Updated on
How to add images in CSS Background
CSS can use both colors and images in backgrounds. CSS3 Gradients were introduced later on, and they behave same like backgrounds images.
Background colors can have any colorname, hexacode or rgb color code. Even we can use HSL colors in backgrounds. Background Colors occupy full width of Border Box.
Background images are also used with background. Images like JPG, PNG and GIF can be used as background images. These images can repeat in x-axis, y-axis or no repeat, can change position and can be attached fixed to screen.
Background Properties
Background Color
Background color property is used to change background color. Background color can have either color name or color code. Only one background color can be used for a single element. See example:
Div Wrap 1 with background red.
<style>
.wrap1{
height:100px;
background-color:red;
}
</style>
<div class="wrap1">
<p>Div Wrap 1 with background red.</p>
</div>
Background Image
Background images are also used to set backgrounds in css. Popular image extension like, JPG, PNG, GIF and svg can be used for background images. To set background image, use URL(path of image). see example
<style>
.wrap2{
height:200px;
background-image:url(images/bg.png);
}
</style>
<div class="wrap2"></div>
Background Repeat
Background repeat property controls repetition of a background image. Default value of background repeat is repeat. Other values are:
Background repeat values
Repeat
Repeat is the default value of all background images. All background images will repeat in both x and y direction to cover whole area. See example
<style>
.wrap3{
height:200px;
background-image:url(images/bg.png);
background-repeat:repeat;
}
</style>
<div class="wrap3">
</div>
No Repeat
background-repeat: no-repeat can stop image from repeating in x and y direction of background. Thus remaining area is transparent. But we can add background color in remaining transparent area.
<style>
.wrap4{
height:200px;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-color:#ccc;
}
</style>
<div class="wrap4">
</div>
Repeat-x
repeat-x will repeat background image on x axis only.
<style>
.wrap5{
height:200px;
background-image:url(images/bg.png);
background-repeat:repeat-x;
background-color:#ccc;
}
</style>
<div class="wrap5">
</div>
Repeat-y
repeat-y can repeat background image in y axis only.
<style>
.wrap6{
height:200px;
background-image:url(images/bg.png);
background-repeat:repeat-y;
background-color:#ccc;
}
</style>
<div class="wrap6">
</div>
round
background-repeat round stretch the image till 50% of original size. Unlike repeat, round show full image at both beginning and end.
<style>
.wrap7{
height:200px;
background-image:url(images/bg.png);
background-repeat:round;
}
</style>
<div class="wrap7">
</div>
space
background-repeat space add white space between background images when repeating on x or y axises.
<style>
.wrap8{
height:200px;
background-image:url(images/bg.png);
background-repeat:space;
}
</style>
<div class="wrap8">
</div>
Background Position
Background Position tells position of background image. The default the background position is left top.
background position can have two values, one for x-axis and second for y-axis. These values can be left, right and center for x-axis, and top, center and bottom for y-axis. px and % cam also be used.
<style>
.wrap9{
height:200px;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background:color:#ddd;
background-position:left top;
}
</style>
<div class="wrap9"></div>
Change Background Position
Background Attachment
Background Attachment property tells whether a background image should scroll or remain fixed on scrolling down window. The default value is scroll.
Background Attachment Values
Background Attachment Scroll
Background-attachment scroll is default value of all background images. These images scroll when browser windows scroll.
<style>
.wrap10{ height:200px;
background-image:url(images/box-model.png)
background-attachment:scroll;
}
</style>
<div class="wrap10"></div>
Background Attachment Fixed
Background-position fixed is another value of background attachment which fixed the background image. While scrolling, image remain fixed and content slides on it making parallax effect.
<style>
.wrap11{ height:200px;
background-image:url(images/box-model.png)
background-attachment:fixed;
}
</style>
<div class="wrap11"></div>
Background
The background property is actually a shortcut of background-image, background-repeat, background-position, background-attachment and background-color. This is the most preferred way to change background properties as a single property can change five properties. See example
<style>
.wrap12{
height:200px;
background:url(images/box-model.png) repeat left top fixed #ccf;
}
</style>
<div class="wrap12"></div>