In HTML page designing we often see various type of background of content, wondering how that works! let's look at some example.
In this tutorial, you will learn how to set webpage background image using css, css for background color etc.
.myDiv { background-image:url('../img/css1.png'); background-position:center; }
We can set html page background color and background image using CSS style, Let’s learn setting up background using CSS
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.
.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.
There are various css properties for setting html page background image, video, color, different type of background position using css code.
to set any image as background you can write background-image: url('../images/learn-css.png');
to set the background position you can write, background-position: center; or background-position: bottom center;
both x and y axis
Often used options are background-repeat: repeat-x
| repeat-y | no-repeat | ...many more
you can set background color of any element, background-color:red or background-color:#ff0000
,
you can set any color using CSS
background radial-gradient example
background-image: radial-gradient(circle at center, white 0%, #222 10%, black 60%);
opacity: 0.6; filter: alpha(opacity=60);
Learn more about how to set CSS Opacity
.bg1 { background: url(myimage.jpg); background-repeat: no-repeat; background-size: auto; }
When you want to specify a fix size for background image.
.bg2 { background: url(myimage.jpg); background-repeat: no-repeat; background-size: 300px 100px; }
Specify the size of a background image with percent
.bg3 { background: url(myimage.jpg); background-repeat: no-repeat; background-size: 100% 100%; }
cover the background, css for background image to fit screen
.bg4 { background: url(myimage.jpg); background-repeat: no-repeat; background-size: cover; }
.bg5 { padding: 25px; background: url(image1.png), url(image2.png); background-repeat: no-repeat; }
You can use two attribute for background size like background image size contain, cover
.bg6 { background: url(image1.png), url(image2.png); background-repeat: no-repeat; background-size: contain, cover; }
You can set background image, background color of any html element like div, span, body, paragraph etc.. using above CSS property.
You may be interested to read following post