Wednesday, August 31, 2016

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 - 

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 -

2. study the blogs:

How div container behaves - box model -

problem:  here is the website:

Here is the solution blog:

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:

No comments:

Post a Comment