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:
background-image property see the bellow example
ex:
ex:
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 inbackground-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 propertyex:
<style> body{ background-image:url('bg.jpg'); background-position:right top; } //Sizing body{ background-image:url('bg.jpg'); background-size:50% 50%; } </style>
No comments :
Post a comment