CODEWITHSUNDEEP
htmlcsssvgbackground-image
user137263
user137263

Reputation: 747

How to get background image/ image to stretch to fill container via CSS?

I have a scale vector image and I want it to fill a container. There's a couple of these sort of questions on SO, although they are a tad old. E.g. Stretch and scale CSS background

However, when I've attempted to implement such solutions the results have been disappointing.

For instance: 

    body  {

    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000;
    background-color: #000
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;

}

...

.twoColLiqLtHdr #container {
    width: 80%;
    margin: 0 auto; 
    border: 2px solid #000000;
    text-align: left; 
    background-color: #003;
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */

  background-repeat: no-repeat; 
    color: #000;
    font-family: "Times", cursive;


    background-attachment:fixed;
    min-height:100%;
    /*top: 0;
    left: 0; */



}

I've tried various arrangements but I cannot make it stretch without leaving blank areas (repeating is a success of sorts, but looks horrible).

However, since I'm working with a svg am I approaching this in perhaps the wrong way, should I be using a svg xmlns tag in the html instead? (P.S. I'm aware of IE8's absolute inability to handle svgs)

Upvotes: 12

Views: 57509

Answers (2)

Robert Longson
Robert Longson

Reputation: 124059

you probably need to add preserveAspectRatio="none" as an attribute of the outer <svg> element in the SVG image itself.

If you don't want to modify the image file then you could try

background-image: url('background_image.svg#svgView(preserveAspectRatio(none))');

Firefox 15 would support that and probably other UAs too.

Upvotes: 12

Giona
Giona

Reputation: 21114

Have you tried

background-size:cover;

Check some examples.

I had issues with webkit, background-size:cover and SVG background images. I solved it adding

-webkit-background-origin:border;

Upvotes: 31

Related Questions