For the web-site I had a few concepts that I wanted to put into place.
- <header> and <footer> in a gradient colour. Opposite direction of gradient for <header> to <footer>.
- Background Image filling rest of page. Image would be opaque where necessary.
- Image would switch from Landscape to Portrait as aspect ratio of window changed. (i.e. Mobile device re-oriented, or Browser window on PC re-sized.)
- The Background image would dictate the size of the content area. All content would either fit inside this area, or would be scrolled within its containing element, which would fit within the area.
Issues implementing the above.
- As I did not want the <header> and <footer> to intrude on the background image I could not set the <body> background attribute to the image. Initially I tried using a <div id=”MainContent”..> and setting its background to the image required. Except that didn’t work because the background attribute does not contribute to the size of an element, hence the <div id=”MainContent”..> element was invisible unless given content, and even then its size was never going to be governed by the background image. Instead I included a specific <img> element and used that as the background. However that in itself brings up two issues
- The src attribute on <img> is not a style attribute and so cannot be set using CSS via the @media pseudo command.
- To use an <img> as a ‘backdrop’ meant setting position:absolute to remove it from the document flow and allowing all the other content to sit on top.
- As we were unable to use the @media pseudo command to switch images between landscape and portrait I had to write a bit of JavaScript to undertake the same task. This was OK, as until I had read about @media, that is what I was expecting to have to do.