CODEWITHSUNDEEP
css
pnumbers
pnumbers

Reputation: 65

Changing my logo image for mobiles via responsive css

I want to display a different image to my mobile users using CSS only, as i don't have access to the html code.

When on mobile I have added display:none to the header-logo-image img { and then add a background-url to the div which succesfully displays my alternative logo. The only problem is when i switch to the background image in the div, I lose my link to the homepage that my other img provided.

Is there any way round this so I can get the background image to link? Is this where CSS image sprites could come in but use them on the img instead?

<div id="header-logo-image">
<a href="http://example.com/folder/">
<img src="http://example.com/folder/wp-content/uploads/2016/01/head-logo.png">

Upvotes: 2

Views: 4861

Answers (3)

AZ 86
AZ 86

Reputation: 11

add in your css

@media only screen and (max-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/mobile_logo.png");
  }
}

@media only screen and (min-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/large_logo.png");
  }
}

Upvotes: 1

Charles Yarbrough
Charles Yarbrough

Reputation: 109

I ended up using this: 

@media only screen and (max-width:800px) {
.navbar-brand img { opacity: 0; }
.navbar-brand {
    background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
    width:200px;
}
}

That way I could leave the existing logo CSS and file there.

Upvotes: 0

Mike Donkers
Mike Donkers

Reputation: 3689

To switch logos when on a mobile device this is an option:

HTML

<a class="navbar-brand" href="/"></a>

CSS

.navbar-brand {
    background: url(PATH_TO_IMG/logo.png);
    width:220px;
    height:65px;
    margin-left:5px;
}
@media only screen and (max-width:800px) {
    .navbar-brand {
        background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
        width:70px;
    }
}

Example

Hope this helps!

Upvotes: 1

Related Questions