General FAQs
Can you quickly explain to me responsive background images?
No, but here's the explanation, anyhoo!
In Responsive web design, we commonly have to deal with an element with a background image that has to be flexible at multiple screen resolutions. When we approach this, there are several options to consider.
Option 1 - Contain
We could contain the image which would always display the full image and create an affect like this:
In Mobile view, the element will be condensed but taller, creating an affect like this:
But, it's unpredictable, because the element height is dynamic to make sure we're expanding with the content, so you could easily end up with it looking like this:
Then you could have multiple image elements stacked back to back where the borders of the image don't line up so that's not an ideal solution.
As you can see, this occurs due to the lack of text in the second element. If you have the same number of lines of text, these would line up perfectly. But the number of lines of text could change as you move to smaller screen resolutions.
Option 2 - Disable Resizing
Alternatively, we completely disable resizing altogether. The background image never changes.
Stacking would be consistent. But compare that image to the ones above and you'll notice that it's vertically cropped, because of the dynamic element height. If there were more text, you'd see more of the image. You could also run into a situation where there's too much text.
That's not great. Now in mobile view:
Now we're looking at just a very small portion of the original image. Too much text would add a border here, too, just like the image above.
Option 3: Cover
Let's look at how we have it now. This is at full image width (which we can adjust).
Still some cropping even though the browser is sized to my image width, because the height of the element is smaller that the height of the image. Now, let's add excessive text:
The image has adjusted itself to cover the area, so now it's cropped on the side.
1920 width:
Zooms in to fill the screen. Mobile view:
Keeps as much of the image viewable as possible while filling the element.
Even if we adjust the images to 1920 width to better fill larger screen sizes, it will probably still crop at the top and as you move to smaller resolutions it's actually going to have to crop more of the edges.
In Conclusion
We generally go with Option 3 as it's the best at covering most bases. Option 1 and 2 are generally used only in certain situations where it makes the most sense.
|Who's the coolest person at OMG?|
FAQs (with Links)! What is (browser) caching?|https://cachingexplained.com/|Why don't we like sliders/carousels as much anymore?|http://shouldiuseacarousel.com/