Two background images in CSS
I'm trying to add two backgrounds in CSS, but one image to fill the entire background and the other to center-align to the right of the page. Here is a section of my current StyleSheet:
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
}
I tried to separate the urls with a comma and then separate the positioning with a comma, but that doesn't work. Any ideas?
source to share
Set the height of the parent element to 100% i.e. html. The value was then used cover
background-size
to occupy the full space of the base image. Set right center
to the "background position" of the first image.
html,
body {
height: 100%;
}
body {
background-image: url("http://placehold.it/300x300/333"), url("http://placehold.it/1200x1200");
background-position: right center, center center;
background-repeat: no-repeat;
background-size: auto auto, cover;
color: #384047;
font-family: "Nunito", sans-serif;
height: 100%;
}
source to share
CSS3 supports multiple background images;
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center center, left top;
background-repeat: no-repeat,no-repeat;
}
source to share
You can see this tutorial: http://www.css3.info/preview/multiple-backgrounds/
example1 {
width: 500px;
height: 250px;
background-image: url (sheep.png), url (betweengrassandsky.png);
background-position: center bottom, top left;
background-repeat: no-repeat;
}
source to share
Refer to this. This will help you ...
body {
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center right, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
source to share