CODEWITHSUNDEEP
htmlcss
Rafael Hernández
Rafael Hernández

Reputation: 364

how to put in a div 2 images in the css background-image: url(.....)

How I can put in the same div in the background two images with css?

<div class="testimonial carousel-item active">
<img class="img-testimonial" src="assets/image-tanya.jpg" alt="">
<div class="text-testimonial">
<p>"I've been interested in coding for a while but never taken the jump, until now. I couldn't recommend this course enough. I'm now in the job of my dreams and so excited about the future."</p>
<p class="small">Tanya Sinclair <span class="grey">UX Engineer</span></p>
</div>
</div>

in .testimonial I have in the background an svg image

.testimonial {
    background-image: url(../pattern-bg.svg);
    background-repeat: no-repeat;
    background-position: right top;
    width: 1000px;
    height: 800px;
    position: relative;
    display: inline-block;
}

Upvotes: 3

Views: 2904

Answers (1)

Sam
Sam

Reputation: 761

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the background-image property.

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

div{
  background-image: url("https://whyy.org/wp-content/uploads/2017/07/LOGO_First_overwhite-1-copy-1024x444.png"), url("https://cdn.iconscout.com/icon/premium/png-256-thumb/2nd-place-594924.png");
background-repeat: no-repeat;
background-position: left top;
width: 1000px;
height: 800px;
position: relative;
display: inline-block;
}
<div></div>

Upvotes: 2

Related Questions