CODEWITHSUNDEEP
htmlcss
Johnny W.
Johnny W.

Reputation: 1

CSS multiple background-images and "contain"

Good day! I don´t know if it´s even possible, but I´m looking for a way to place two or more background-images underneath each other in one div. The images should resize automagically with the "background-size: contain;" tag. Is there a way to do this? I´ve already tried the following:

background-image: url('../img/bild.jpg'), url('../img/bild2.jpg');
background-size: contain contain;
background-repeat: no-repeat, no-repeat;

But it didn´t worked...

Greets, Johnny

Upvotes: 0

Views: 50

Answers (2)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

hi even you can try this same result using the shorthand method that the only use of background property

you can try this

background: url('../img/bild.jpg'), url('../img/bild2.jpg') no-repeat / contain;

Upvotes: 0

Pepo_rasta
Pepo_rasta

Reputation: 2900

you are missing , between contain

background-image: url('../img/bild.jpg'), url('../img/bild2.jpg');
background-size: contain, contain;
background-repeat: no-repeat, no-repeat;

http://www.w3schools.com/css/css3_backgrounds.asp

you can set any set of values for multiple background each separated by ,. But values for one background are separated by whitespace. Example: difference can be seen in position:

background-position: ??px ??px, ??px ??px;
                     ^^^^ ^^^^  ^^^^ ^^^^
       position for:  image 1    image 2

Upvotes: 1

Related Questions