1

I would like to cover the entire width, but the image to be scaled to 70% of the height.

<div class="Bg">Hello</div>

.Bg {
    background-image: url(https://svgshare.com/i/C_9.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

So I would like the behaviour of background-size: contain, which stretches the image to the width of background-size: cover.

Codepen Example: https://codepen.io/anon/pen/oOyYoR

A H
  • 2,164
  • 1
  • 21
  • 36
  • Does `background-size: 100% 100%;` work for what you want? – arieljuod Apr 20 '19 at 18:02
  • 1
    not for my example, it centers the image, let me upload my image and change the codepen, sorry. – A H Apr 20 '19 at 18:04
  • Could you explain a little bit more? – Pouya Jabbarisani Apr 20 '19 at 18:05
  • I don't get what you need, can you show an image of what you have and what you want? contains just makes the image be 100% height or width depending on the ratios, and you say you want it to stretch to be 100% width, `100% 100%` does that. – arieljuod Apr 20 '19 at 18:06
  • Updated Codepen & the background image im trying to get working in the body of the text above ^ – A H Apr 20 '19 at 18:06
  • 1
    Ah, you are using an SVG, that's a different story. – arieljuod Apr 20 '19 at 18:07
  • 1
    You need to modify your SVG file to support stretching https://stackoverflow.com/questions/11658173/how-does-one-make-a-svg-background-that-stretches-rather-than-tiles – arieljuod Apr 20 '19 at 18:09
  • 1
    Read this too https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds – arieljuod Apr 20 '19 at 18:09

0 Answers0