SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist stonedeft's Avatar
    Join Date
    Aug 2009
    Posts
    589
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image size

    Hello, I'm currently on a project where in my client wants a background image that will span 100% on all screen resolutions. The main content will be a div 1024px width centered on the browser.

    css:

    body{
    background-image: url(/images/myBackground.jpg);
    background-position: center
    }

    #content{
    width:1024px;
    margin-left:auto;
    margin-right:auto;

    Question:

    what will be the size of my background image more particularly the width? I started with 1600px X 1000px do you think the size is enough? Or I'll make it bigger?
    Don't Panic

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by stonedeft View Post
    I started with 1600px X 1000px do you think the size is enough? Or I'll make it bigger?
    That should be plenty for current screens. On smaller screens a lot of the bg image won't be visible, though.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    also keep in mind that background images dont scale.

    so it depends on the kind of background image you are using.

    different screen resolutions will show different part of the big background image.

    vineet

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I would also be careful about sizing, heavy background images often take a long time to load which can be very problematic for designs which are loading on slow Internet connections, generally I would advise ensuring the background image is no larger than 200KB (that seems to be the benchmark average for most "big background" designs). When CSS3 comes along things will be much better because we will be able to scale backgrounds by assigning width and height values to them (so we will be able to scale 100% of the screen) but that's not really something we can rely on as there is little browser support.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •