maw2be maw2be - 2 months ago 6
CSS Question

3 images as div's background

I have a big issue.
I'm trying to put 3 images as a div background. All is fine, but I can't push them to cover div. When they are next to each other there is a gap between them. css background-size: cover, cover, cover; is not working. How to make that the 3 images cover the whole div without any gap between them?

<div id="top_part">
<div class="row">
<div id="advert">
<h1><span>Advertise something here</span></h1>
</div>
</div>
<div class="row">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>


and css

#advert {
border-color: rgb(254, 46, 49);
border-width: 5px;
background-image: url(images/image1.jpg), url(images/image2.jpg), url(images/image3.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left, center, right;
background-size: 400px 400px, 400px 400px, 400px 400px;
height: 400px;
width: 1200px;
}


I managed to do this only with a static size and I will have to use media queries for mobile friendly....

link on fiddle

Answer

If all 3 images will have same size, then you can use 33% per width of each image and 34% for the center one. So it can looks like background-size: 33% 100%, 34% 100%, 33% 100%;.

Here I made an example what I mean. Hope this one will help you.

#advert {
  background-color: red;
  background-image: url(https://placehold.it/150x200/00ff00), url(https://placehold.it/250x200/00ffff), url(https://placehold.it/350x200/0000ff);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left, center, right;
  background-size: 33% 100%, 34% 100%, 33% 100%;
  height: 200px;
  width: 600px;
}
<div id="advert"></div>

Comments