0

I've made my background image responsive in my :after psuedo but not able to control the height responsiveness so I end up with a big white space at the bottom of my image.

My CSS:

.element:after {
    content:'';
    background:url('http://i57.tinypic.com/4kdytv.png') no-repeat;
    background-size:100%;
    height:284px;
    display:block;
}

Fiddle: http://jsfiddle.net/w6amht6o/

I've seen a couple other questions like this but none of them discuss making the height responsive. I seen you could try something like "background-width:100% 100%;" but this did not work for me.

Let me know what I am doing wrong!

Anthony Russo
  • 913
  • 4
  • 13
  • 31
  • What do you mean by "making the height responsive"? – joshhunt Dec 04 '14 at 19:42
  • Well I mean the image is responsive as it sits in the fiddle. If you inspect element though you will see a huge white space below the image because of the set height. I am trying to avoid that white space. – Anthony Russo Dec 04 '14 at 20:30
  • Doesn't `background-size: cover;` do what you want? See: http://jsfiddle.net/w6amht6o/1/ – joshhunt Dec 04 '14 at 21:12
  • That doesn't actually scale the image. The way I have it works perfect just need to remove the white space below the image from the height being set to 284px. – Anthony Russo Dec 04 '14 at 21:47
  • Ok I see what you want now. What you are wanting is quite difficult because the psuedo element will have no idea what height to be unless you set it to be a specific height. You can either a. Use an `` or b. Use a trick that involves padding (only possible if you know the aspect ratio of the image). See: http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio – joshhunt Dec 04 '14 at 22:24

1 Answers1

2

No such thing as background-width in CSS. You're thinking of background-size, which should do exactly what you're describing.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Phil Tune
  • 3,154
  • 3
  • 24
  • 46
  • 1
    And more specifically `background-size: cover` to fill the element without skewing the proportions. – BurpmanJunior Dec 04 '14 at 18:04
  • I apologize I meant "background-size" but it's still not working correctly. It doesn't show the image unless a fixed height is set such as in my code above. Also "background-size:cover" doesn't scale the image at all. – Anthony Russo Dec 04 '14 at 19:12
  • @AnthonyRusso show us a jsFiddle, then, so we can see what it's doing. – Phil Tune Dec 04 '14 at 19:14