Background image: recommended size?
The Custom Background help at:
is very useful as far as it goes.
I’d like to try a full-size, no-repeat, fixed background image, just to see what it looks like. I realize I can use whatever size I want. But the help file does not suggest a size. I’m wondering if there’s so much variation in aspect ratio and screen resolution these days, that there isn’t any good size for all of them.
If anybody would like to recommend a size, or tell me they tried this and didn’t find a good one, I’d appreciate it.
(Blog is scvgs.org, hosted at WordPress.com)
The blog I need help with is scvgs.org.
I have a template for full-screen Twitter backgrounds that I downloaded from somewhere that measures 2560 x 1600, if that helps. I found it when I was trying to answer the same question you are asking.
Of course, if you had gradient edges, or edges that would blend into a solid background color, you could get by with something smaller.
Thanks for your reply. The fact that yours is the first after a month makes me think this must be an old-fashioned idea. I guess it clashes with the newly popular “infinite” front page approach.
I’m currently using a background that is “only” 1920 × 1200. It’s almost a waste of time on my laptop, because so little of it shows (at the bottom). It looks better on my 22 in. widescreen (1680 x 1050), but there’s still a lot that doesn’t show.
My understanding of background image size is exactly what you said, that since there are so many monitor sizes, with so many resolutions, and so many devices, it isn’t possible to give a true “use this size” recommendation.
Too large of an image, which is what would be needed in many cases to avoid the tiling, would also take a while to load.
For my background image, I blurred the edges and set it as fixed rather than scrolling, so that the tiling effect wasn’t too obvious. It sort of (not really) works.
Once you get your background in place, you can easily check your loading time at pingdom.com. It will show the loading time of each element on the page and you can see if the background image is taking too long to load.
Thank you, windwhistle! Another bookmarked site.
BTW, you can make any image tileable with the “Make Seamless” filter in Gimp (free program). Some images will work a lot better than others, but it sure is a handy tool.
I’ll tell you want I do with sites I design. Basically I know of no one that uses a web browser full screen on wide monitors. My monitor is 2560px wide, and I never set the browser window full screen. I have a very large monitor for photo editing and also so that I can have more than one window in a couple programs open at once, side by side.
If you notice on the theme you are using, it has a maximum width for the content area of 1000px. That is so the content area doesn’t get too wide to make reading difficult (typically text areas should be around 500-600px wide. The 1000px was very likely chosen to allow people using 1024px wide monitors to not have to scroll horizontally, and there are still about 20% of the webbing public on 1024px wide resolutions.
I use background images 1500px wide typically in web designs since that covers the majority of monitors out there and then I choose a complimentary background color so that if someone is viewing the site with a browser window set wider than 1500px, they will not see the stark white to the right and left of the image. For image height, I generally don’t worry about going more than 1000 and then set the image to not scroll (fixed).
Images that are 1900px wide or more cannot be optimized down to a file size that does NOT adversely impact page loading times (typically they will be 1MB or more), and since the search engines consider page loading times when determining search engine ranking, slow loading sites will get a hit and appear lower in search results.
In general, try and keep background images under 150k in file size if at all possible. That will also make those of us on slow(er) internet connections happy.
@windwhistle – thank you again! I was able to do it with PSE and load an image of “only” ~ 400×420, and though you can spot the repeats, the tiling is gone – what fun!
@thesacredpath – thank you for this, another post of yours I’m marking a “favorite” to have the info.
@azscvgs – thank you for asking this question, I really hope this info was helpful for you, and I apologize for hijacking!
The topic ‘Background image: recommended size?’ is closed to new replies.