Photoshop Question posted in
The official user guide can be found here.

How do I change HTML/CSS header image depending on page width? – Photoshop

In my website, I’d like to design a header image in Photoshop. It will be responsive via max-width:100% However, at mobile screen width it should change to a different image, something more suited for that size screen. How is that done in HTML or CSS?

Tags:

4

Answers


  1. 0

    Using Media Query you can do something like this or you can change the width to one that fit your needs:

    @media (max-width: 768px) {
  .className {
    //style goes here;
  }
}

    Check this Link it will help you

    Login or Signup to reply.
  2. 0

    instead of img tag use background image for your header and change its src in media query

    like

    @media only screen and (min-width : 1200px) {
    .header{
        background-image: url('img/myimg.jpg');
    }
}
@media only screen and (min-width : 992px) {
    .header{
        background-image: url('img/myimg2.jpg');
    }
}

@media only screen and (min-width : 320px) {
       .header{
            background-image: url('img/myimg3.jpg');
        }
    }
    Login or Signup to reply.
  3. 0

    If you are using core CSS and HTML then use Background Image for your header and fix the background size.

    .header{
        background-image: url('img/myimg.jpg');
        background-size:100% 100%;
    }

    This will adjust the background view according to display size.

    Instead you can use bootstrap classes for best responsive look.

    Using Bootstrap Classes:
    For small screens:

    <img id="logo" class="img-responsive hidden-lg hidden-md hidden-sm visible-xs" src="Images/small-header.png" />

    For Large screens:

    <img id="logo" class="img-responsive hidden-xs" src="Images/large-header.png" />

    You can use images with different dimensions for different size of screens.

    xs = Extra small,
sm = small,
lg = large,
md = medium,

    Refer bootstrap for better knowledge.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search