SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast MartyBoi's Avatar
    Join Date
    Dec 2011
    Location
    Saginaw MI
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Background Image Width Standard, ' Best Width For A Background Image ' ?

    I am wanting to create a Background Image for my WordPress Blog. An Image that will cover the whole ' Body ', one that looks great with all resolutions. But the problem is, I don't know what length would be best to achieve such a goal.

    So here I am seeking help, and help indeed will be much appreciated.

    Thank you

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It depends on the nature of the image. If it has a repeating pattern, the ideal is to isolate one repeat and then let it repeat across the screen. If it's a piece of photography, there's no ideal width. It will not be wide enough on some screens, unless you make it ridiculously big. So perhaps look at options for fading it out at each end. We'd need to see it, and your blog, to advise more.

  3. #3
    SitePoint Enthusiast MartyBoi's Avatar
    Join Date
    Dec 2011
    Location
    Saginaw MI
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Advice Needed For WordPress Blog....

    Thank you ralph.m
    Attached Images Attached Images

  4. #4
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hi Marty, as Ralph mentioned it can be tricky picking a background size as these days there are multiple considerations given display sizes and resolution. What you can do is employ some visual trickery in order to give the impression of depth in the background without needing to try and fill it completely. This is often done as Ralph mentioned by fading out the edges of your image to a solid background colour. You often see it with a glow-type effect centred at the top of a website. It picks out the header area and gives some weight and visual punch without needing to take up the whole background. If your website is likely to have long pages that scroll vertically and you want to have the effect present, you can do a similar thing but apply it to the edge of your website's frame/body content.

    Photographic backgrounds can be tricky and I often see them used at resolutions that are too small on my 27" iMac. I know what they're supposed to look like, and would look like at different resolutions but often I see 80-90% of the image and then a nasty repeat both horizontally and vertically.

    The other advantage to providing part of an image with a fade is bandwidth. You get the benefit of an image without needing to download a large background image file or having to provide multiple background files for different screens.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    @MartyBoi That is an image of your site, presumably, but we need to see the background image to judge whether it lends itself to what Slackr is describing above.


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
  •