Suggestion for background css properties
Hello!
I've noticed when I started my site (january 2016) that we have recommended sizes for our background in this option : http://take.ms/AMt9R I thought it wasn't meant to stay that way. But it's still here.
Despite the fact I'm amateur and like my site to look that way, I thought having an image background that stretches to any screen resolution would be quite a requirement for any webmaster/designer.
I don't know if you couldn't make a "background-size contain" css code or if you just forgot about it because it doesn't seem important. It's the kind of details easy to fix (I guess?) and that makes a site look more serious. Also easier for us model users to not have to resize our pictures if we want to change our design (for a special event for example).
With the contain/cover or auto css properties our pictures would stretch the screen even if we zoom out : http://i.imgur.com/BCLD2hM.jpg That's what I got when I zoomed out the first time and was really disapointed.
The recommended size is 1077px x 1440px, so my background doesn't look the same on smaller or bigger screens. Maybe that's something we can change? I'm not saying we need other sizes options, but stretching background is a must have for any website imo.
And if you need a talented dev for that kind of stuff, my man would be happy to join your team!
Comments
Hi there Sharleen! Thank you for bringing this up!
As far as the dev team explained to me in regards to the reasoning for why this is done, stretching the images would pixelate them and make them look blurry, resulting in an unattractive look.
What I'm seeing on the default demo website for your skin: http://autumn.demo.modelcentro.com/home
Those images are the recommended size and up to a reasonable viewable size of the page (50% zoom for me), they look pretty good: http://take.ms/mVt34 Scrolling does not affect the background and so the site looks good at double my screen resolution. Stretching images to fit wouldn't provide for such results.
I did notice that the background images you use are slightly smaller than the recommended 780x1440 px, they are 500x1000 px. Using images of the recommended size would improve the look of your website when zoomed out and on very big screens.
If I misunderstood your request, please elaborate and I'll go quibble with the dev team some more
Here is a full list of recommended sizes for basic pages on your skin, for reference:
Splash & Join Backgrounds (left&right) 1077px x 1440px http://autumn.demo.modelcentro.com/splashhttp://autumn.demo.modelcentro.com/join
Logo: text or image 299px x 99px min / 1000px x187px max http://autumn.demo.modelcentro.com/home
Header image 1000px x187px http://autumn.demo.modelcentro.com/home
Site backgrounds (left and right) 780px x 1440px http://autumn.demo.modelcentro.com/home
Welcome Banner 564px x 530px http://autumn.demo.modelcentro.com/home
About Me Image 450px x 440px http://autumn.demo.modelcentro.com/about
Spoil Me Image 579px x 279px http://autumn.demo.modelcentro.com/tips
Thank you Natalie, I'll just resize them then.
Though if we use HD/pro photographies the css stretching shouldn't blurry nor pixelate them, at least that's what I notice when I design sites myself, not sure about MC and I understand that it's done to fit everyone (not everyone use 4000px pics for their background).
Thanks a lot for the list, that will greatly help me!
Trouble is that not everyone has 4000px images, in fact the majority won't... so this option was chosen as the compromise.