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.
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.
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
Hi,
Good news Site does now have a contacts page. Basic, but it is there