CODEWITHSUNDEEP
csshtmlsvgbackground-image
bluefantail
bluefantail

Reputation: 1129

Creating an svg that scales to the height of browser but has a set width

Im trying to create an svg in illustrator and use it as a background image to fill to the top and bottom of the page but still be inside a div that is 950px wide, and am having no end of trouble.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>

This is my svg, as you can see illustrator has given it width and height elements. I removed these so i could set them in the css:

#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;                    
}

I've tried various different combinations of removing the sizes from the svg and adding styles in css such as:

background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;

but nothing I do seems to work. Any ideas? There could be something fundamental I just don't understand about svgs? The behavoir, when I can get it to display anything at all, seems to be that it either becomes totally set in size, or set in size and then when I make the window smaller it shrinks the width and maintains the aspect ratio.

Its supposed to look like this however big the window is :

The black curves on both sides are shapes inside the blue element with 950px width

But when i make the window height bigger the side of it disapears, this is using 

background-size: cover;

In the css, and no dimensions in the svg.

The right side has dissapeared

When I add a set width like so: 

background-size: 950px cover;

It displays like this:

Adding set width

And if I make the window smaller is does this:

What the ? Which is especially annoying.

EDIT

Rest of css and HTML concerned looks like so

CSS

/* Main Containers */
.center{
                    margin: 0px auto;
                    width: 1200px;
                    height: 100%;
}
#left{
                    width: 150px;
                    height: 100%;
                    display: block;
                    float: left;
                    background: #000000;
}
#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;
                    background-size: cover;

}
#right{
                    width: 100px;
                    height: 100%;
                    display: block;
                    float: left;
                    background: #000000;
}

HTML

<body>
    <div class="center">


        <div id="left">
            <!-- Header -->

            <!-- END Header -->

        </div>


        <!-- Nav -->
        <div id="nav">

        </div>
        <!-- END Nav -->

        <div id="middle">


        </div>

        <div id="right">

        </div>
        <!-- Footer -->

        <!-- END Footer -->

    </div>
</body>

Upvotes: 6

Views: 4530

Answers (2)

bluefantail
bluefantail

Reputation: 1129

Found a solution to my problem

using 

preserveAspectRatio="none"

In the svg file

like so:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>

The sizes are removed from the svg completely. Dont remove the viewBox or enableBackground properties - those are important.

Css like so:

#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;
                    background-size: 100% 100%;                 
}

* Here is the result *

Full screen

Large window

Small screen

Small window

Upvotes: 5

Matt Cashatt
Matt Cashatt

Reputation: 24198

Use the max-width CSS property. Try this:

#middle{
                    max-width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;   
                    background-size: 950px 100%;                 
}

Upvotes: 0

Related Questions