+ 2

Why I cant insert two background images seperated by comma in your Code-Editor (It doesnt show them in the integrated browser)?

16th Mar 2018, 8:00 AM

Fabian Kunkler

4 Answers

+ 3

p { padding: 30px; background-image: url("green_photo.jpg"), url("somethingelseonyourserver.jpg"); color: white; } But: + "integrated browser" (and most widely, sololearn code playground) require absolute urls + background images are listed from right to left ( meaning that most left url image will be on top of most right one, so need to have transparency and/or be smaller than the second one ^^ ) Working example: body { background-image: url("https://vignette.wikia.nocookie.net/illogicopedia/images/b/b3/Biohazard.png/revision/latest?cb=20080822114853"), url("https://www.dravenstales.ch/wp-content/uploads/2017/01/hirnverdreher_268.gif"); }

16th Mar 2018, 8:24 AM

visph

+ 2

If yours <p> tags are empty (doesnt have content, as '<p></p>'), the default height fit to zero, so the element doesn't have any surface to draw background: without content, one fix could be to set an explicit height... Else, provide your complete code to let us able to help you debug your code ;) Anyway, you could test by yourself if your urls are valid by applying your background definition on <body> rather that on <p> element ^^

16th Mar 2018, 9:27 AM

visph

@visph Thank you! I used two absolute urls (one including amazon, then two of sololearn and putted the logo (its png and has transparency) as first link but i saw only a whitr screen all time...

16th Mar 2018, 9:16 AM

Fabian Kunkler

@visph Thanks or your fast help, I will try it later :) Really nice community here 🔥

16th Mar 2018, 9:29 AM

Fabian Kunkler