CSS Beginners Guide part 3 - Working with Backgrounds

HI, today we are going know about CSS Backgrounds, css providing several background properties to apply to html page or to html elements, with this we can apply background color, background image to be set and mange the image positions, opacity, we can also apply multiple backgrounds also, we can manage the background X and Y repeating positions.

Apply Background Color

we can use background-color property to apply the color as a background to html page or any element, see the bellow example, we can specify a color value using by
HEX value like : #ff00ff,
RGB value like : rgb(255,50,0);
Color name like : green

ex:

<style>
body{background-color:#F00};
</style>

Apply image as a Background

we can apply background as a image to entire html page or any element using background-image property, by default the background is repeated and we can control repeating using background-repeat, we can simply apply the multiple background images using separated by comma in
background-image property see the bellow example

ex:

<style>
body{background-image:url('bg.jpg');
background-repeat:no-repeat;

//Repeating Horizontally

background-repeat:repeat-x;

//Repeating Vertically

background-repeat:repeat-y;

//Multiple Background images

background-image: url(bg.jpg), url(cartton.jpg);
}
</style>

Background Positions and Sizing

we can also manage the background positions using background-position property and sizing with background-size property

ex:

<style>

body{
background-image:url('bg.jpg');
background-position:right top;
}

//Sizing


body{
background-image:url('bg.jpg');
background-size:50% 50%;
}

</style>