Search code examples
csswordpressbackground-imagefillbackground-size

Filling DIV regardless Aspect Ratio

What i'm trying to achieve is to fill a div with an image both in width and height. What i get is control over width but height will respect aspect ratio without filling div in height. Tried background-size: cover and contain in every combination possible but what i can really cover without cropping is just width. I can't give absolutely size in pixel because my page is responsive.

.slick-list {
   background-image: url(http://lace.x10host.com/wp-content/uploads/2015/11/slicklist.png);
   background-size: 100%, cover;
   background-repeat: no-repeat;
}

What i really need is to make the white stripe (1440 x 76 px) in image 1 cover the entire slicklist in image 2. Is it possible with css? I'm getting mad, help me please! enter image description here

Solution

  • Did you try background-size: 100% 100%; which stretches the image both horizontally and vertically in the div?

    Note: using this method distorts the image, which you might not want, but if you want a white box with blurred border, you can do that with CSS only, which keeps corners nice even if you resize.

    Update: added the snippet for the accepted solution below:

    div#x {
  background: #000;
  padding: 10px;
}
div#shadow {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #fff;
}
    <div id="x">
  <div id="shadow"></div>
</div>