CODEWITHSUNDEEP
htmlcsssvgbackground-image
bijoume
bijoume

Reputation: 365

Why doesn't my SVG background-image work?

I placed a green PNG image as background to a div and it looks like this:

working background image

I used a CSS hack in order to keep the text inside the green background. So this is my code for that section:

#aboutprocess {
    background: url("../img/tech_bg.png") no-repeat left top;
    width: 100%;
    background-size: cover;
}
#aboutprocess .container {
    padding-top: 32.6316%;
    position: relative;
}
#aboutprocess .row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#aboutprocess p {
    color: #ffffff;
    text-align: center;
}

<section id="aboutprocess">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-link center-block white" role="link" type="submit" name="op" value="Link 2">about our process</button>
            </div>
            <!--end col-md-8 col-md-offset-2-->
        </div>
        <!--end row -->
    </div>
    <!--end container-->
</section>
<!--end aboutprocess-->

I want to replace the PNG with an SVG file, and the only thing that I changed in the CSS is the file extension:

#aboutprocess {
    background: url("../img/tech_bg.svg") no-repeat left top;
    width: 100%;
    background-size: cover;
}

But when I preview this in browser, I can't see the background anymore:

non-working background image

What am I doing wrong? You can see the demo page with the PNG background image here.

Here's a Dropbox link to the SVG file.

Upvotes: 10

Views: 46250

Answers (5)

ChetPrickles
ChetPrickles

Reputation: 930

My problem was the color of the SVG was the same as the color of the background, so you couldn't see it.

Upvotes: 0

Kyle Vassella
Kyle Vassella

Reputation: 2646

There are a few potential solutions here.

  • Revisit how you created the SVG. The software you use and the method you generate it with (e.g. in Illustrator) matter greatly. There's a pretty specific way of doing it correctly.
    This was the solution for OP; see comments for specifics

  • Making absolutely positively sure that tech_bg.svg is in the directory that it's supposed to be (the img folder) and that it's spelled exactly the same as it is in the text editor, including case sensitivity of the filename and file extension. GitHub certainly takes extension case sensitivity literally and I've had problems uploading SVG files for that same reason (.svg vs .SVG).

  • Increasing the z-index of #aboutprocess, particularly if your text really has disappeared (I'm assuming it's still there, just white, but try highlighting it to make sure). Play around with the other CSS values nearby like no-repeat, left, top, etc, too.

  • Try clearing your browser cache and refreshing once, and try other browsers too. Also, if by some chance you happen to be using IE8 and below or Android 2.3 and below, that would definitely be the cause; they don't support SVGs in background-images.

It's a tough question to answer definitively since we can't be there testing it with you on your local machine, which is where the inconsistency is happening.

Upvotes: 4

Felype
Felype

Reputation: 3136

Browsers will NOT display SVG files if the web server transfers it with the wrong "content-type" header.

If your web service is returning application/octet-stream or text/xml, the image will not work properly, in spite of the SVG being transferred correctly and the SVG file itself being fine.

The correct media type for SVG is image/svg+xml.

Upvotes: 9

kamran abbasov
kamran abbasov

Reputation: 11

.pic {
    width: 20px;
    height: 20px;
    background-image: url("../img/tech_bg.svg");
    }

dont foreget dots and / ---> ../ not background ---> background-image: and dont forget clear browser history and cash

<div class="pic"></div>

Upvotes: 0

Raymond
Raymond

Reputation: 1429

Sometimes the problem is not always came from the css. Please have a try to add the following line to your .htaccess, so the server can recognize svg files from your css file (background: url("../img/tech_bg.svg") no-repeat left top;), Insert this line:

RewriteRule !\.(js|ico|gif|jpg|jpeg|svg|bmp|png|css|pdf|swf|mp3|mp4|3gp|flv|avi|rm|mpeg|wmv|xml|doc|docx|xls|xlsx|csv|ppt|pptx|zip|rar|mov)$ index.php

No need to have so many rules as above but depends on what you need for the format you would like to have on your site, but for your current question here, please make sure there is "svg" in the rule of your .htaccess file.

It works, try it! :)

Upvotes: 0

Related Questions