Background Image and Landscape / Portrait

Posted byDaddy Raccoon 3 Comments on Background Image and Landscape / Portrait

For the web-site I had a few concepts that I wanted to put into place.

  1. <header> and <footer> in a gradient colour. Opposite direction of gradient for <header> to <footer>.
  2. Background Image filling rest of page. Image would be opaque where necessary.
  3. 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.)
  4. 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.

  1. 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
    1. The src attribute on <img> is not a style attribute and so cannot be set using CSS via the @media pseudo command.
    2. 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.
  2. 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.

Published by Daddy Raccoon

My chronological age is about twice my self-image age and about three times that of my maturity. I have two daughters and they both seemed to me to be older than me by the time they were twelve.

Join the Conversation

3 Comments

  1. Does your website have a contact page? I’m having problems locating it but, I’d like to shoot you
    an e-mail. I’ve got some creative ideas for your blog you might be interested
    in hearing. Either way, great website and I look forward to seeing
    it improve over time.

    Reply

    1. Hi,
      Site, as published does not have a contacts page (Definitely should have), but the site is still under construction. I reached the stage where the only way forward was to integrate fully with WordPress as opposed to what I have which was a static Web Site, with WordPress being used just for Blogging. So I am now in the process of fully delving into WordPress and am developing a Plug-in and Theme. Theme is to present the information as indicated on the Background Image blog. The Plug-in is for including a BLIKI feature to a WordPress site.

      I would be please to receive any help / thoughts / comment. Email steve@quintic.co.uk

      Reply
      1. Reply
Leave a comment

Your email address will not be published. Required fields are marked *