CODEWITHSUNDEEP
htmlcss
YaBCK
YaBCK

Reputation: 3029

(Background-size: Cover) overlaying padding

I'm looking for help towards background-size: cover;

So the problem I'm having is that I've got padding on my image box's but having the background image set in CSS seems to have the image covering the image box padding instead of having inside the padding.

I was wondering if there is any way of doing it through background: url() and background-size and having it inside the padding instead of overlaying the padding.

What i have so far: 

.image-container {
  background: #eee;
  width: 100%;
  height: 120px;
}

.image-container div.image {
  background: #ee1;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
  padding: 4px 0px;
  background: url("https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg");
  background-size: cover;
}
<div class="image-container">
  <div class="image"></div>
  <div class="image"></div>
</div>

Upvotes: 2

Views: 1840

Answers (1)

Danield
Danield

Reputation: 125473

You could use a border instead of padding.

Something like:

.image-container div.image {
  padding: 4px 0px; /* remove this */
  ...
  border-top: 4px solid transparent; /* or whatever color */
  border-bottom: 4px solid transparent; /* or whatever color */
  box-sizing: border-box;
  background-size: cover;
}


.image-container {
  background: #eee;
  width: 100%;
  height: 120px;
}

.image-container div.image {
  background: #ee1;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
  border-top: 4px solid green; /* using a color just for demo. */
  border-bottom: 4px solid green; /* using a color just for demo. */
  box-sizing: border-box;
  background: url("https://static.pexels.com/photos/14621/Warsaw-at-night-free-license-CC0.jpg");
  background-size: cover;
}
<div class="image-container">
  <div class="image"></div>
  <div class="image"></div>
</div>

From the above demo snippet you can see that the border is above the image.

Upvotes: 2

Related Questions