Was curious. Anyone know what the optimum dimension a background picture should be for the full coverage? I swear I read it somewhere but can't seem to remember and find it.
In my experience, the bigger the better, within the 3mb limit set for hosted files. Because I build on my main monitor (and not my laptop), I use backgrounds that are 3840x2160 to match my resolution. Anything smaller than that, when viewed on my monitor at least, tends to look 'stretched out' and can get blurry.
As a newbie I also learned a hard lesson a few weeks ago where something looked GREAT on my main monitor, but then when my CSS Guru pointed out I should also test that on my laptop (2560x1600), everything was waaay out of proportion. Until recently I only had a standard resolution 1920x1080 and had no idea that I needed to code with bigger/smaller resolutions in mind q.q
IDK if that helps but that's my two cents!
EDIT: Corrected 1940 to 1920
As a newbie I also learned a hard lesson a few weeks ago where something looked GREAT on my main monitor, but then when my CSS Guru pointed out I should also test that on my laptop (2560x1600), everything was waaay out of proportion. Until recently I only had a standard resolution 1920x1080 and had no idea that I needed to code with bigger/smaller resolutions in mind q.q
IDK if that helps but that's my two cents!
EDIT: Corrected 1940 to 1920
I'm definitely still around! Most of my time is getting swallowed up by my job these days so I'm not as active as I'd like to be.
3MB is way too big of a file size. It should ideally be 500kb or under as far as background images go. It's also very important to note that the screen resolution you use isn't even represented in the top 10 most commonly used screen resolutions in the world (see this and this chart). While it's certainly good practice to cater to as many resolutions as possible, ideally a website/layout targets 1920*1080 resolutions and is then responsive enough to make sense on a wide variety of other resolutions.
To cater to the minority of extra large resolutions, you can use the @media (min-width: 2500px) CSS rule to custom code something that is only loaded for people with screens that big. It's very difficult to accommodate such large screen sizes for people like myself who use 1920*1080 displays though. We can easily make our browsers smaller and accommodate smaller screens, but we can't exceed the bounds of our monitors.
In practice, layouts that are setup with proper functionality and responsiveness in mind tend to look good on larger screens too. So making sure you're not getting *too* fancy and make everything dependent on screen size will go a long way.
The tl;dr remains that 1920*1080 is the most commonly used background size for websites.
Quote:
In my experience, the bigger the better, within the 3mb limit set for hosted files. Because I build on my main monitor (and not my laptop), I use backgrounds that are 3840x2160 to match my resolution. Anything smaller than that, when viewed on my monitor at least, tends to look 'stretched out' and can get blurry.
3MB is way too big of a file size. It should ideally be 500kb or under as far as background images go. It's also very important to note that the screen resolution you use isn't even represented in the top 10 most commonly used screen resolutions in the world (see this and this chart). While it's certainly good practice to cater to as many resolutions as possible, ideally a website/layout targets 1920*1080 resolutions and is then responsive enough to make sense on a wide variety of other resolutions.
To cater to the minority of extra large resolutions, you can use the @media (min-width: 2500px) CSS rule to custom code something that is only loaded for people with screens that big. It's very difficult to accommodate such large screen sizes for people like myself who use 1920*1080 displays though. We can easily make our browsers smaller and accommodate smaller screens, but we can't exceed the bounds of our monitors.
In practice, layouts that are setup with proper functionality and responsiveness in mind tend to look good on larger screens too. So making sure you're not getting *too* fancy and make everything dependent on screen size will go a long way.
The tl;dr remains that 1920*1080 is the most commonly used background size for websites.
TL;DR: I bought a freakishly large monitor, noted lmao
I will say for my own personal templates I can't stomach 1920x1080 anymore, the 'stretch' that it does on both my laptop and monitor just bothers me with all the blurred pixels. Which is a shame now that I know I have a Freak Monitor, because as you mention the vast majority are still using 1920x1080.
It's also worth noting that one of the charts referenced has a significantly large bar for "Other" that would include resolutions as freakishly high as mine:
(Note that I filtered for Desktop only, and changed it to Bar)
A different source that splits it the Other into "High" and "Lower" resolutions:
From my own experience buying both a new laptop and monitor recently, higher resolutions are gaining more popularity. Admittedly I can still crank both of mine down to 1920x1080 if I want to, but it's not the default / recommended size for either screen. Just food for thought I suppose!
To your point though it is dang near impossible to code for resolution bigger than you can literally see on your own monitor. I can safely say that was an eye opener when I upgraded and went back to look at past templates I'd made. :'( Everything, even outside of RPR, looked very weird for a very long time til I got used to it. So much negative space everywhere.
I will say for my own personal templates I can't stomach 1920x1080 anymore, the 'stretch' that it does on both my laptop and monitor just bothers me with all the blurred pixels. Which is a shame now that I know I have a Freak Monitor, because as you mention the vast majority are still using 1920x1080.
It's also worth noting that one of the charts referenced has a significantly large bar for "Other" that would include resolutions as freakishly high as mine:
(Note that I filtered for Desktop only, and changed it to Bar)
A different source that splits it the Other into "High" and "Lower" resolutions:
From my own experience buying both a new laptop and monitor recently, higher resolutions are gaining more popularity. Admittedly I can still crank both of mine down to 1920x1080 if I want to, but it's not the default / recommended size for either screen. Just food for thought I suppose!
To your point though it is dang near impossible to code for resolution bigger than you can literally see on your own monitor. I can safely say that was an eye opener when I upgraded and went back to look at past templates I'd made. :'( Everything, even outside of RPR, looked very weird for a very long time til I got used to it. So much negative space everywhere.
Awesome. It's kind of hard to find usable pictures that are 1920x1080.
It's probably why some of my styles look stretched as the pictures are too small.
I get the work thing Sanne. Good to hear from you! I was getting worried.
It's probably why some of my styles look stretched as the pictures are too small.
I get the work thing Sanne. Good to hear from you! I was getting worried.
Moderators: Sanne