Ask your WordPress questions! Pay money and get answers fast! (more info)

Background Image in SVG with PNG fallback and cross browser

I am using the following to position a sites logo as a background image and then reposition the logo with media queries.


header #logo {
padding: 0 0 0 0;
margin: 0 auto 0 auto;
height: 241px;
background: url('images/logo.png') no-repeat top 30px right 0px;
}


@media (min-width: 768px) and (max-width: 991px) {

header #logo {background: url('images/logo.png') no-repeat top right 40px;}
}

@media (min-width: 481px) and (max-width: 767px) {

header #logo {background: url('images/logo.png') no-repeat top 0px center;}
}

@media (max-width: 480px) {

header #logo {background: url('images/logo.png') no-repeat top 0px center;}
}


I want to be able to change the logo for a .svg file but have the .png version show for browsers that don't support .svg.

I don't want to use a plugin please.

Answers (3)

2014-04-14

Sai kumar answers:

Hi,

You can use like this :


background: url('images/logo.png') no-repeat top 30px right 0px;
background-image: url('images/logo.svg');


Or by using modernizer you can solve this. Modernizer provides no-svg class to the div as mentioned. So the css code:

.no-svg header #logo {
background: url('images/logo.svg') no-repeat top 30px right 0px;
}

will solve it

Thanks
Sai


julesphoto comments:

would the first solution not just cover the png with the svg? This way I am downloading the 2 images instead of one?

2014-04-14

Arnav Joy answers:

Can you provide me your site url?

2014-04-14

Hariprasad answers:

Hi,
Hope you can do it like this.

Change the code that used in header logo like this

<?php
global $is_IE;
if($is_IE) { ?>
<div id="logo"></div>
<?php } else { ?>
<div id="svg-logo"></div>
<?php } ?>

And you can set .svg image as backgorund for #svg-logo in css. Or if you are using SVG code, place it in else condition.
Is that make sense?