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

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -