CODEWITHSUNDEEP
htmlcsssvg
Mihai C
Mihai C

Reputation: 33

CSS SVG image not resizing

I have an SVG image and it just doesn't display the way I want.

This is the CSS code I'm using :

.container-background {
min-height: 25vh;
background-image: url("svg-image.svg");
background-size:     cover;                      
background-repeat:   no-repeat;
background-position: center center;  
border-bottom: 1px solid #e9e9e9;

I also tried object fit contain / cover / every other option. I just can't get it to display right. I need it to cover the whole container.

Any ideas how to achieve this ? I ran out of options.

Upvotes: 1

Views: 1618

Answers (2)

Alex
Alex

Reputation: 2800

Your CSS is functioning correctly, cover takes up 100% of the space maintaining the aspect ratio of the image so any excess gets cut off.

Background contain

If you would like to display the whole image then you should be using contain.

Fiddle https://jsfiddle.net/7uca5x64/1/

Stretched background using inline image

If you would like it to take up 100% of the width and height without keeping it's aspect ratio then add it in as an inline image, but this would require a format other than SVG. You could then use absolute or fixed positioning to make it look like a background image.

img {
  height: 100%;
  width: 150%;
  position: absolute;
  left: -20%;
  z-index: -1;
}

Fiddle https://jsfiddle.net/7uca5x64/5/

Stretched background using inline SVG

If you have to use SVG, you will have to inline it into the HTML and then you can control it via CSS. You will also have to add preserveAspectRatio="none" to the SVG.

svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

Fiddle https://jsfiddle.net/7uca5x64/6/

Upvotes: 0

Ushka
Ushka

Reputation: 493

Try setting background-size:contain, min-height:100vh and background-size:50% (you can remove background size if you like or adjust the percentage to get it covering just right for your design).

.container-background {
  min-height: 100vh;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg");  
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center center;
  background-size: 50%; // remove this or tweak to ajust the fill amount
  border-bottom: 1px solid #e9e9e9;
}

jsfiddle: https://jsfiddle.net/so099hnt/1/

Upvotes: 1

Related Questions