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

Header Image: Size and Responsiveness – Photoshop

I m trying to build a website and want to add a header image similar to these examples: 1.) http://bit.ly/1PP0Shr 2.) http://bit.ly/1PP1h3n

My current header image is a photo that is 1580 x 1050 pixels.

My questions:

1.) What is an acceptable width and length for a header image size to be viewed on desktop computers?

I know there probably isn’t one ‘default’ size to rule them all, but I would like guidance on some dimensions that I can use moving forward and even resize my current header images in photoshop.

2.) What CSS code should I use to make the header image responsive on all screens?

Are there some specific background properties to apply in my CSS stylesheet? I have even read briefly about media queries, but do not know enough on how to use them at this point.

Thank you.

Tags:

3

Answers


  1. 0

    You are right, there is no ‘default’ size for all devices.
    If you want a acceptable size for your header, i would prefer the “Full HD” resolution (1920px width). Thats the most common screen size.

    There a multiple ways to make your header image reponsive.

    1. Just make your header image width 100%

      (Better with a css class)

    2. Make an 100% screen width div and put the header image in background and set the background-size: cover.

    EDIT:
    When you are using 1 Image for all screen sizes, be sure that even small devices have to download the hole full screen image (and scale them down to document width). The best way are multiple images and media query

    EDIT 2:
    @Turtle was right. 1366 is the most common screen size. http://www.w3schools.com/browsers/browsers_display.asp

    My bad^^

    Login or Signup to reply.
  2. 0

    Size is equal to quality in this case.

    You could give the image CSS properties such as background-size: cover and width:100% which would cover/stretch the image to fill the div it is contaiend in. Note that on larger view-ports an image with your resolution (1580x1050px) will look pixilated as the width of the div (if 100% and using the entire viewport) is larger than the image.

    @0x4Dark is giving you false information with 1920px being the most common screen size as it’s actually 1366×768.

    However, for your image to look good on all devices I would generally use an image with a width of no less than 1920px which ensures your picture will look great on all devices. This could better be done by using media queries that change the image size depending on the size of the viewport.

    Login or Signup to reply.
  3. 0

    Question one seems a bit trivial, as you stated, there isn’t one “default” size, this should be decided on a case by case basis. If you think it looks good, and doesn’t take up too much space on the user’s browser, then use it. If it looks too big, make it smaller, it is all just designers preference.

    As for question two however:
    There are a few different ways in which you could make the header image on all screens. As you asked for a CSS solution, I’ll start with that first.

    One basic way in which you good approach this is by using simple media queries to change the width / height of the image depending on the screen resolution. It may be beneficial to set the height as a percentage value, and then set a max-height value in pixels, to stop the header getting too large. Read more on media queries here.

    Example

    @media only screen and (max-device-width: 667px){
img { height: 50%;
      max-height: 200px;
    }
}

    Another method would be to have several header images of different sizes, best suited to different screen resolutions. This could be achieved in CSS or JQuery.

    CSS
    (This method does not work in FireFox 40.0.2 and Internet Explorer 11.0.9600.17905)

    @media only screen and (max-device-width: 667px){
    .imgClass{
        content:url("img/mobileimg.png");
    }
}
@media only screen and (min-device-width: 667px){
    .imgClass{
        content:url("img/desktopimg.png");
    }
}

    JQuery
    Using `$(window).width(); to find the window width. You can create as many sections of the if statement as required, for different resolutions.

    $(function() {
  if($(window).width() <= 667) {
    $("img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("img/desktopimg.png", "img/mobileimg.png"));
    });
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search