html - Activate a new logo within a div at certain width -
i have different logo image when site goes tablet/mobile size. figured best way rather have img src within div, set logo background image div/id.
when page goes below 990px different mobile logo displayed.
this have, works correct way this?
https://jsfiddle.net/omca16oe/
<div id="logo"><a href="/home"></a></div> #logo { background-image:url('http://i.imgur.com/o49apfa.jpg'); background-repeat: no-repeat; display:block; width:452px; height:62px; } @media (max-width:990px) { #logo { background-image:url('http://i.imgur.com/cnydtsd.jpg'); background-repeat: no-repeat; display:block; width:452px; height:62px; } }
it works, use mobile-first appropach in case, because desktop logos/images larger , won't loaded @ on mobile devices (= reducing bandwidth), like:
#logo { background-image:url('http://i.imgur.com/cnydtsd.jpg');/* mobile logo */ background-repeat: no-repeat; display:block; width:452px; height:62px; } @media (min-width:991px) { #logo { background-image:url('http://i.imgur.com/o49apfa.jpg'); /* desktop logo */ } }
also, avoid repetition of stuff that's there (like "display: block" etc.)
Comments
Post a Comment