How to write background in CSS class
In HTML page designing we often see various type of background of content, wondering how that works!
We can set background color and background image, Let’s learn setting up background using CSS
Background using CSS Style
When we say setting background, it can be background of any type of HTML document / HTML element.
So here we create a class with some background, and the class can be applied on any element
Now in following example we have written some text (“Using Background Image”) in a <div> and the <div> has some background image.
Using Background Image
Here is the class we have written.
.bgExample
{
background-image:url('../images/learn-css.png');
background-position:center;
min-height:120px;
border:solid 1px #0094ff;
text-align:center;
font-size:28px;
color:#ffd800;
}
Now you can enhance it further with many other background-image properties
Background properties in CSS Style
-
background-image
to set any image as background you can write background-image: url('../images/learn-css.png');
- background-position
to set the background position you can write, background-position: center; or background-position: bottom center; both x and y axis
- background-repeat
Often used options are background-repeat: repeat-x | repeat-y | no-repeat | ...many more
- background-color
you can set background color of any element, background-color:red or background-color:#ff0000 , you can set any color using CSS
