0

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

yAnTar
  • 4,269
  • 9
  • 47
  • 73
Razinar
  • 727
  • 3
  • 13
  • 21

2 Answers2

2

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>
aorcsik
  • 15,271
  • 5
  • 39
  • 49
  • background-size: 100% 100%; isn't working. Width is fine while height is scaled cause of aspect ratio. I'll try the css solution now instead of using an image! – Razinar Dec 10 '15 at 13:55
  • Solved creating a blurred background directly with css. Thank you! – Razinar Dec 10 '15 at 16:18
1

If background-size: 100% 100%; isn't working then perhaps your div or container element is not as large as you think it is. Maybe you're seeing it full size because you're seeing overflow exceeding the bounds of the element.

See this page... background-size: 100% 100%; should do what you want it to.

webguy
  • 664
  • 10
  • 27