CSS - responsive background image

August 31, 2016

Spent over 3+ hours to work on the research on CSS - responsive background image. Take time to learn CSS and enjoy the workout.

Learn to design a nice menu page with header and footer, with responsive background image, it is a fun journey. How to make it pragmatic solution? Julia has her own journey recently.

Step 1:
Study the idea to design CSS -

https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/ 

use a span element, and set padding top to aspect ratio of image -

Step 2: box model issues - footer is cut off, and background image is cut off on mobile devices.

1. Read stackoverflow article to address the issues -

http://stackoverflow.com/questions/8916148/ipad-iphone-full-page-background-image-shows-cut-off-screen-shot-link-includ

https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/

2. study the blogs:

How div container behaves - box model -

http://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed-children

problem:  here is the website:
http://jsfiddle.net/dPCky/

Here is the solution blog:
http://jsfiddle.net/blowsie/dPCky/1/

http://www.gsmarena.com/lg_nexus_5-5705.php

The lesson Julia learned is that body is the container - root of DOM tree. The height of body should be bigger than inside elments' height. Otherwise, footer is missing since it is out of box of DOM element - body.

Editorial Notes:
Learn how to search github more often:
1. CSS reading blog:
https://github.com/YuanXiaosong/Front-End-Interview