MJC SEO & Web Development Blog > Using Panoramic Photos for Variable Width CSS Backgrounds

Using Panoramic Photos for Variable Width CSS Backgrounds

Variable Panoramic Header Backgrounds – CSS Development Techniques

Traditionally, websites are made either as a static width – one that doesn’t change depending on other factors – or one that is fluid – that does not have a width set and will expand to fill the width of the screen, whatever that is. For a long time, the established tradition for most sites has been fixed width, to be full screen horizontally on 800px and 1024px width displays. In terms of line lengths for reading text, more than around 1000 pixels and things get harder to read with most font sizes used on the web, which is a drawback of the simplest simple fluid layouts. But with the recent increase in average screen resolution of web users, particularly in professional sectors such as media, design and publishing and in the the higher income home user demographic, it is worth presenting a site that looks good at many resolutions.

I could write a lot on this topic, but in this article I am going to cover the basic nuts and bolts of variable width layouts.

This site at around 1600px horizontal resolution

This site at around 1280px horizontal resolution

This site at around 900px horizontal resolution

The technology for this technique has been available to web developers for several years, indeed I made the outer template for this site nearly two years ago, so I’m not covering anything new or experimental, but variable width layouts are an area that’s often been left untouched, either for browser compatibility reasons (which today are far less of a factor, especially with certain target demographics) or because it’s rather tricky and needs a good understanding of css2 layout and templating.

The Photo

Obviously, you’ll need a panoramic image. The aspect ratio of this will affect either how wide your site can be at it’s maximum width and/or the height of your header. The photo I used in the header of this site is at the time of writing actually the widest aspect ratio panoramic image I have made, which is something of a limitation as I can’t just drop another image in if I wanted to use a JS rotation/slideshow script. Of course, you can crop other panoramas to fit, but this is something to be aware of if you plan to use an image rotation script.

Panorama of Karamea

Be aware of areas of colour and light and shade when choosing an image – these can be taken advantage of for good text and logo contrast.

Choosing your Width

You need to decide how wide your header will be at it’s widest. I decided I wanted to use a header a little more than 200px high on this site, at this height the image is around 1500px wide, so for me this is what determines how wide the page/header can be.

The template

<body>
 <div id="container">
     <div id="header"></div>
     <div id="main"></div>
     <div id="footer"></div>
</div>
</body>

This is the basic structure needed for the HTML. The important part is that the page has an outer container. Most modern websites are built to this basic structure.

Basic CSS

#container {
    margin: 0 auto;
    max-width: 1525px; /* the width of your pano image */
    min-width: 900px; /* min width you want to support */
}

#header {
    background: url("Your Panoramic Image Here.jpg") no-repeat left center;
    height: 210px; /* the height of your pano Image */
    margin: 0 auto;
    overflow: hidden; /* Stops image from overflowing container */
/* width: 99.3%; */ /* Uncomment to adjust padding at either side of the image */
}

Edit where it says “left” in the first line of #header to choose your horizontal image alignment, either left, right or ‘center’ – this will determine how what area(s) of your panorama are truncated when displayed on narrower resolution displays. My current header image happens to be most suited to left alignment, but all photos are different.

And that really is it. For modern browsers.

The reason this sort of technique has not been well used historically is that min-width and max-width aren’t supported in IE6 and below. However in 2011, the percentage of users of this 10 year old browser is now down in the low single percent for sites targeting most demographics, with companies such as Google and Facebook beginning to withdraw from supporting it over the last year or so.

The other, significant reason is that it becomes far more tricky to arrange content contained in the template. To prevent gaps appearing at wider display and float drops (where something becomes too wide for the width it is allowed to fill on the page, and ‘drops down’) content must also be fluid width or variable width. Forget about using em or px padding and margins and start thinking about percentage. Borders are tricky because they can’t be expressed in percentages, only in static widths. Even a 1px border in certain places can cause problems. In some cases, the outline property will work instead, however this will not always be the case. CSS3 drop shadows with no offset are an alternative I have used in a couple of places on this site.

What if I need to support IE6?

If you must have a consistent appearance, it’s possible to emulate the min and max width properties with JavaScript. Usage of the JQuery library allows greatly simplified coding and implementation. There are other ways to support these (and other) properties, such as the ie8.js or ie9.js scripts, but I would not recommend these based on my experience with them.

2 Comments

  1. Posted January 20, 2011 at 7:03 pm | Permalink

    Hi where i can download this theme, I have tried to modify my theme “wind” but it doesn’t work

  2. Miles Carter
    Posted January 22, 2011 at 5:42 am | Permalink

    Hi Jabin, this theme is not available for download as I coded it myself and it is still a work in progress. I may at a later date release this theme on the Gallery site, I will let you know if I do.

Post a Comment

Your email is never shared. Required fields are marked *

*
*