Two Background images in CSS

Question

I'm trying to add two backgrounds in CSS but one image to fill the entire background and the other to be aligned on the centre 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've tried separating the URLs with a comma and then separating the positioning by comma but this doesn't work. Any ideas?

You may follow CSS3.info or CSS-tricks as they have clearly explained. You may follow http://www.css3.info/preview/multiple-backgrounds/ or https://css-tricks.com/stacking-order-of-multiple-backgrounds/ You can also follow MDN link : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds — Balkar Kalsi, Jul 07 '15 at 11:52

score 2 · Answer 1 · answered Jul 07 '15 at 11:59

Set the height of the parent element to 100% i.e. to html. Then used the cover value of background-size to occupy full space of the underlying 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%;
}

score 0 · Answer 2 · answered Jul 07 '15 at 11:49

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;
    }

refer http://www.css3.info/preview/multiple-backgrounds/

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

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, left top;

background-repeat: no-repeat;

}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 07 '15 at 11:50

UtopiaIsGood

169
3
15

score 0 · Answer 4 · answered Jul 07 '15 at 11:52

Refer this.it 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;
 }

Two Background images in CSS

4 Answers4

example1 {