The one of the most important and interesting thing in css3 is supporting multiple backgrounds on a single background . Yes css3 can supports multiple backgrounds . But the thing have to be remind is that there is different syntax for different browser . So most commonly used web browser is our target . We will target mozzila firefox , google chrome and opera .
We talk about different browser when we use gradient in background , otherwise if we are using only some images then we don't need to talk about different browser . Because, basically the syntax is same .We will discuss about css gradient in our later post .
I will describe here the syntax of multiple background -
syntax : -
background: url( url of the image 1), url( url of the image 2), url(url of the image 3);
We will use bacground-position to set the position of each image in background and the syntax to set position will be as -
syntax : -
background-position:position1 , position2 , position 3;
Where position1 denotes the position of background image 1 , and so on ..
We will use background-repeat to set the background repeat or no-repeat property.
We will take an example here, first of all I show you the images used in background
The css we use to create multiple background is as follows -
css is -
I use gradient as third background , in css part it look as -webkit-linear-gradient(left, rgba(255,255,255,0.2), rgba(255,255,255,1)), gold .So don't confuse with it , we will talk about it later .Now the result from this css will be as -
We think this post of course will help you in using multiple backgrounds . We have tested this script wth google chrome version 19.0.1084.52 , and firefox version 12 . But in firefox you will be enable to see this gold coloured background . Because , it is browser dependent script But you will be able to see both images in your webpage .
If you have any problem in script then either contact us or comment on this post your problem . We would like to answer you.
Thanks to visit .
We talk about different browser when we use gradient in background , otherwise if we are using only some images then we don't need to talk about different browser . Because, basically the syntax is same .We will discuss about css gradient in our later post .
I will describe here the syntax of multiple background -
syntax : -
background: url( url of the image 1), url( url of the image 2), url(url of the image 3);
We will use bacground-position to set the position of each image in background and the syntax to set position will be as -
syntax : -
background-position:position1 , position2 , position 3;
Where position1 denotes the position of background image 1 , and so on ..
We will use background-repeat to set the background repeat or no-repeat property.
We will take an example here, first of all I show you the images used in background
image1
image 2
The css we use to create multiple background is as follows -
css is -
<style type="text/css">
body { background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhIpGBvkAjidTWT8DX_FuMCGMqvVdKh4W_t5FXRqeuJs4H1_oCJTVNbcRNNcsz_32kLMP8Wieicv1UYwDLQw99yynMSMeEUcD91v9v-oZ96zKRR8qmfUpYz5cPzGTIb9HN6E0gYZOKaQ9Q/s1600/mul-bg1.jpg ), url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAY9j5yBxysrmb8cGYw59TroWZE-rTHzNmiBiAGIA9amPhzMwmmbvtmPYVhqtrp661ddaZlYYEkjlpyUGBCsceFwo2viB2HtTJF7ia7JvQRJP3p_U6pQPfI1q6R39jOtYu99Q-JEwO72NF/s1600/mul-bg2.jpg), -webkit-linear-gradient(left, rgba(255,255,255,0.2), rgba(255,255,255,1)), gold;
background-repeat:no-repeat,no-repeat;
background-position:top left,bottom right; }
</style>
We think this post of course will help you in using multiple backgrounds . We have tested this script wth google chrome version 19.0.1084.52 , and firefox version 12 . But in firefox you will be enable to see this gold coloured background . Because , it is browser dependent script But you will be able to see both images in your webpage .
If you have any problem in script then either contact us or comment on this post your problem . We would like to answer you.
Thanks to visit .
No comments:
Post a Comment