12

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)

Community
  • 1
  • 1
user137263
  • 747
  • 5
  • 11
  • 25

2 Answers2

30

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;
Giona
  • 20,734
  • 4
  • 56
  • 68
  • 1
    Thanks. cover successfully covers the container. However, and weirdly, the image is too 'zoomed in', such that only the top half of the image is visible. o.O As I have the image fixed it is not possible to see the rest of the image... – user137263 Sep 26 '12 at 12:54
  • You don't need `background-attachment:fixed;` anymore, as it will cover the whole height! – Giona Sep 26 '12 at 12:55
  • It is baffling me a bit - but the background image seems to disappear entirely when it is no longer fixed! :p – user137263 Sep 26 '12 at 21:45
13

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242