6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

What size of image to fill background of a login page?

by ncloud
6 replies
  • WEB DESIGN
    • |
What size of an image should you use for a login page if you want the image to cover the whole background? I'm not sure since they're different size screens out there - you'd want it to work on all of them.

I tried an image 1280 x 1024 because that is my screen resolution, although I guess resolution wouldn't be the pixels. Don't know what I was thinking. Anyway, it wasn't big enough - it didn't cover the entire screen. And I am using the CSS Code that's suppose to make it cover the entire screen:

body{
background-image: url(13green.jpg);
background-size: cover;
}


You could actually see that it was stacking the same image on top of each other - the last inch at the bottom of the screen was actually the top inch of the same image stacked below it.

So is there like a recommended image size that will cover all the screen sizes?
#background #fill #image #login #page #size
  • Profile picture of the author eluminoustechnologies
    Try 2272x1704 resolution for the background image. It will be clear and add a better look to your website.
    Signature

    Team eLuminous
    Front End Development |
    Web Application Development Company |
    Hire SEO experts

    {{ DiscussionBoard.errors[10665514].message }}
  • Profile picture of the author ncloud
    How do you change the resolution of an image? I've only changed the width and height in pixels. Can you change both the resolution and pixel width and height of an image? Because it seems like the pixels would be the most important to get the image to cover the whole screen, no?
    {{ DiscussionBoard.errors[10666109].message }}
  • Profile picture of the author Sahana Chawla
    Try with 1920*1080 or 1920*1200
    {{ DiscussionBoard.errors[10666959].message }}
  • Profile picture of the author ncloud
    To fit my screen the best it ends up being like 1920 x 1550. But I can't see that working on all screen sizes. Clearly there is something wrong with this code I'm using:

    body{
    background-image: url(13green.jpg);
    background-size: cover;
    }

    Because it never stretched my image to cover the screen like it's suppose to. I had to keep making changes to the size of the image to get it to fit the size of the screen. And it's not responsive to different screen sizes because if I adjust the size of the browser window, I can see multiple copies of my image stacked vertically on top of each other.

    Anybody know the solution?
    {{ DiscussionBoard.errors[10669458].message }}
  • Profile picture of the author ncloud
    How do you guarantee a background picture will look right on all the different size screens?
    {{ DiscussionBoard.errors[10721393].message }}
  • Profile picture of the author ITDaniel
    You can change resolution using Caesium, download it and try. And about the size being okay for many screens, try and use media query, it's for responsiveness, it will help probably.
    {{ DiscussionBoard.errors[10741734].message }}

Trending Topics