So for as long as I can remember, I’ve been using “background-position: center center” to center the background images that are stretched to cover the full background.
These images will often be cropped, as they don’t always fit the set size.
But lately, I’ve been noticing that this doesn’t always work out for the best.
Here’s an example.
The above is a header for a blog post on unleash.alingham.com. It has been positioned “center center”, and does a relatively good job. However, the image is somewhat cropped, and almost misses the mark in terms of the focus of the image.
Why does it lose focus?
Well, because as a photographer, it is very rare that you would use centre lines to frame your photos. They come out unbalanced and simply look ‘wrong’. Generally, photographers stick to the rule of thirds. This is widely documented around the web and world wide. Beginning photographers have it drilled into them. It’s not to say that rules aren’t meant to be broken, but that to turn an average photo into a great one, a simple shift to thirds may be all it takes. Things like people, eyes especially, or points of focus should fit into any of the intersecting lines that the thirds make.
With this in mind, by using center center, we are ignoring these photographic ‘rules’ and applying our own, completely missing the focal point of the photo that we decided was good enough to put on our website in the first place.
There won’t be 100% chance of getting it right with every background photo. Especially if you are using it as a given fixed template of a ‘featured image’ for blog posts, as is the case in unleash.alingham.com.
However, by using ‘background-position: center 33%, we use the top third line, which is the one most often used for focal points regarding objects or people, which let’s face it, is 90% of your chosen images unless you’re running a landscaping blog!
Here’s the same example using center 33%.
What a difference that makes! Suddenly, because the photographer has used the top third line, and we’ve now targeted it by using center 33%, the whole image makes the website work (least of all because of the lady now chewing on a white person doing a somersault!)
Here are both images next to each other.
It’s pretty clear to me which cropped view works best!