how to add a second background with css?

user_9943969 0
Viewed 65

how can I archive, that css displays two background-images? The first should be in the center and the second should be bottom left. By trying the following, only the second image appears, but not the first one:

        color: black !important;
        background:url('desktop-application.png') #ffffff scroll no-repeat;
        background-position: center;
        background-attachment: local;
        margin:0pt auto;
        background:url('Word-2-icon.png') #ffffff scroll no-repeat;
        background-position: bottom left;
        background-attachment: local;
        margin:0pt auto;
background css html
3 Answers

#example1 {
  background: url(https://placehold.it/250x250) left top no-repeat, url(https://placehold.it/500x500) right bottom no-repeat;
  border: 1px solid red;
  height: 500px;
  width: 500px;
}
<div id="example1"></div>

To apply multiple backgrounds using CSS, using this code. Please refer to this link.

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

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

or

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
user_145667900

You can make a container that's on the bottom left, and then select the container and make the background your other image

user_147488390

You could use ::after and position:absoluteto apply the second background-image

div {
  background-image: url('https://picsum.photos/150');
  width: 150px;
  height: 150px;
  position: relative;
}

div::after {
  content: '';
  background-image: url('https://picsum.photos/70');
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 70px;
}
<div>

</div>

user_78257380
Related