- You could start with the header div, which should (or could) cover the entire width of the browser window (viewport); this means it has to have a width of 100%.
- Apply a background color or image to this div.
- In this header div you could insert a child div with a width of 90% and a max width of 1200px. When you have done this, remove the height of the parent header div (flexible height).
- In this child div you can insert another child div in which you import the png logo (pass through). This logo should have a fixed width. When you have done this, remove the height of the parent header div (flexible height).
Now you have a full width header with a background color or image, and in it a logo that will be aligned left or right within an area that has a width of 90% of the viewport, but not wider than 1200px. Whenever you change the viewport, make it wider or narrower, the logo will scale and keep it’s position according to the viewport. The background (the full width container) will behave accordingly.
It’s really, really easy. It’s no rocket science, and it will never fail.
freewaytalk mailing list
email@hidden
Update your subscriptions at: