How to Code Fluid Heights for Background Images and Videos with CSS-Only

Graphic. Illustration of a responsive iframe video and background image using CSS-only fluid heights.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Mobile-friendliness is often a top concern for today’s websites. Mobile web browsing officially overtakes desktop browsing. Web analytics firm StatCounter cites 51.3% of global web browsing occurs on mobile devices and tablets versus 48.7% on desktop computers (November 2016). It’s very likely then that mobile users represent the majority of target audiences everywhere, so failure to appeal to mobile users means losing out on a big market share. Since images and videos are also popular with mobile users, make sure your background images and videos mobile-friendly with a CSS-only fluid heights.

51.3% of global browsing occurs on mobile devices and tablets vs. 48.7% on desktop computers.

StatCounter, November 2016, via The Guardian

Why You Need to be Mobile-Friendly

From the onset mobile-friendly websites have a marketing advantage. Websites that are not mobile-friendly simply don’t receive the same exposure from search engines. As a result, those sites face lost leads and marketing opportunities as well a less than stellar brand image. Conversely, mobile-friendly websites are rewarded. Google’s technology, Accelerated Mobile Platform or AMP, rank mobile-friendly websites higher in its algorithms (cited via Associations Now, March 2016).

Finally, a company’s brand suffers if the website experience is poor. Yet, to users, a poor experience is often a non-mobile-friendly one. According to an infographic posted by Yahoo! Advertising Solutions, 48% of users say they’re annoyed with websites that aren’t optimized for mobile use. Additionally, 48% of users believe if a mobile site isn’t working well, the organization must not care (March 2013). Marketing firm McKinsey & Company adds that, “Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead” (January 2014).

How to Become Mobile-Friendly

To assist with mobile-friendliness, implement fluid and responsive web designs. (What’s the difference between fluid, responsive, and other kinds of web design layout techniques? “Comparing Web Design Layouts: Static, Adaptive, Fluid, Responsive, and Mobile-First” explains.)

Both width and height of content should be given consideration in web design in order to have maximum impact on viewers and to communicate information clearly.

Why Making Mobile-Friendly Fluid Heights Can Be Difficult

Unfortunately, while it is easy to set fluid widths, fluid heights are more difficult.

The parsers in web browsers that “read” the code and built a web page do so like Western readers. Web parsers start at the top left of the screen, proceed right, and finally down. They place web page elements in that order. Parsing like this, they are quickly able to determine object widths.

Height on the other hand can’t be determined until the last item is placed. If a height is pre-determined by the developer and fixed in the code, the content fails to adapt to viewport sizes. Undesirable cropping and annoying scrollbars may result. If the developer tries to set a relative height using percentages or ems, the content may not display at all. It also might otherwise appear at a size that’s less than useful.

Yet, some content requires fluid heights. Divs with Inline Frames (IFrames) or background images may crop the content when viewed on smaller viewports. As a result, a tiny video displays, followed by gaping negative space before the rest of the content resumes. On the other hand, a video might only display the title because the bottom is cut out. Background images can encounter similar obstacles. In many cases, images are at the fore-front of the design and appear simply as images. Yet, sometimes images are placed into the background. Web developers might use images in background to add zoom, animation, parallax, or other effects. This can help illustrate concepts and provide more information. A solution for fluid heights would preserve the original aspect ratio to prevent cropping.

CSS-Only Solution to Making Mobile-Friendly Fluid Heights

Have no fear! It IS possible to make fluid heights—just not by setting heights. What do I mean? The trick is to set the height to zero (!) and instead add a padding-bottom equal to the (height ÷ width) of the desired aspect ratio. For example, a YouTube iframe showing a video in a 3:2 aspect ratio (or 6×4, if that’s more familiar) would require the following CSS: height: 0; padding-bottom: 66;.

Graphic. Illustration the CSS padding-bottom needed for various iframe video and background image aspect ratio sizes for CSS-only fluid heights.

Complete making an object with a fluid height: add a wrapper for the iframe or background image in the HTML. Then add a few more CSS styles in the stylesheet. Check out the JSFiddle below for the specifics!

The ability to make both fluid widths and heights will greatly enhance the mobile browsing experience. These few HTML and CSS simple changes make the web design easier to find, navigate, and view. Consider this helpful hint the next time you code!