Background Image in SVG with PNG fallback and cross browser WordPress
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)
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?
Hariprasad Vijayan 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?