How can I change background image of logo when accessed by mobile?

Question

My html like this :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
    </a>
</nav>

My css like this :

@media (max-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('assets/images/logo-school-mobile.png');
    }
}

If access by dekstop it call image logo-school-icon.png and logo-school.png

If access by mobile I want to display logo-school-icon.png and change logo-school.png to logo-school-mobile.png

I try like that, but it does not work. If accessed mobile, logo-school-icon.png and both images(logo-school.png and logo-school-mobile.png still appear. Should have only logo-school-icon.png and logo-school-mobile.png appear

How can I solve this problem?

Note : I'm still find a solution. Please read my question right. I hope answer with demo (html+css). Thanks

background image is a css property .image src is a html attribute .they are different.what you need to do is hide one image on mobile using display none.or use background image without a image element.but using image element for logo is the better way — Madhawa Priyashantha, May 06 '19 at 04:02
you have to hide the logo-school.png for the mobile view. so add the this in css : display = "none" — vijju, May 06 '19 at 04:02
You might want to check this https://stackoverflow.com/questions/27853884/media-queries-and-image-swapping — Haru, May 06 '19 at 04:04
@Madhawa Priyashantha what do you mean? I dont understand. I need a spesific answer — moses toh, May 07 '19 at 02:38
@vijju I had do it. How can I display logo-school-mobile.png? Please answer this question with full script — moses toh, May 07 '19 at 02:40

G Work · Accepted Answer · 2019-05-08T07:02:24.213

As some have answered you could apply a class to each of the image tags and then manipulate on which resolution they display, but you could also use:

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="icon" width="150" height="150">
        <img class="logo-school" src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="logo"  width="300" height="300">
    </a>
</nav>

CSS

@media (max-width:530px) {
  nav a img:nth-child(1) {
    display: none;
  }
}

@media (min-width:530px) {
  nav a img:nth-child(2) {
    display: none;
  }
}

Just adjust image sources to your own.

@G Work I had try it. But it does not work. Please answer with full script(html & css) — moses toh, May 07 '19 at 02:42
I created a pen for you please check it out. https://codepen.io/grbawork/pen/ZNbzrZ — G Work, May 08 '19 at 06:58

score 0 · Answer 2 · answered May 06 '19 at 04:05

You should add a classname to the <img> that shown on desktop. Then set it display: none; for mobile view.

@media (max-width: 530px) {
    .navbar-brand img.logo-school-desktop {
        display: none;
    }
    .navbar-brand .logo-school {
        background-image:url('assets/images/logo-school-mobile.png');
    }
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-desktop" src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
    </a>
</nav>

Please read my question again. I don't want to hide logo-school-icon.png in the mobile — moses toh, May 07 '19 at 02:43
But you said `If accessed mobile, both images(logo-school.png and logo-school-mobile.png still appear. Should have only logo-school-mobile.png appear` — Chaska, May 07 '19 at 02:47

Stefan Joseph · Answer 3 · 2019-05-08T04:42:12.887

You could simply use a media query to achieve this

Edit: I seem to understand what your problem is. Hope this edit solves your problem. I have added a third img tag to show and hide it depending on your screen size using media queries

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-icon" src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
       <img class="logo-school-mobile" src="{{ asset('assets/images/logo-school-mobile.png') }}" alt="logo">
    </a>
</nav>

@media (min-width: 320px) and (max-width: 530px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: none; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: block; // Use !important if you need to overide a style
        }

}

@media (min-width: 531px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: block; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: none; // Use !important if you need to overide a style
        }

}

I had try it. But it does not work. Please answer with full script(html & css) — moses toh, May 07 '19 at 02:41
I have edited the post with a different solution (html & css). See if it works — Stefan Joseph, May 08 '19 at 04:35

score 0 · Answer 4 · answered May 08 '19 at 08:07

I see you've updated your question. Now it is more clear. Try this code, works for me.

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
      <img class="logo-school" width="300" height="300">
    </a>
</nav>

CSS

.logo-school {
  display: block;
  background-size: contain;
}

@media (max-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930');
    }
}

@media (min-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('https://www.schoolbrandingmatters.co.nz/wp-content/uploads/2018/11/Whitau-School-Logo-2.jpg');
    }
}

Just adjust backgrounds url to your images.

Here is the working pen - https://codepen.io/grbawork/pen/ZNbzrZ

How can I change background image of logo when accessed by mobile?

4 Answers4