Swap banner image with CSS and PHP Sep14 '05

Let’s say I have a site template set up, and included within that template is a header, which is just a simple banner image, much like the one on this site:

My web site banner image

This banner image is part of the template, so if I make a change to the banner image, every page reflects this change. I only have to make changes once.

However, let’s say there’s some sections of my site that need a different banner image. It could be just a slight adjustment to the current banner image - or it could be a completely new banner image.

Since my header (which contains the banner image) is hard-coded to the template system, how would I allow for different images to be swapped in, depending on the section of the site?

Well... to start - using your native server-side scripting language, you can test to see which section of the site the viewer is currently at. This "test" is different for everyone. It all depends on how your CMS is set up.

For me, it simply involves checking the URL for the appended directory - something like: matthom.com/contact/ would return contact.

Then, with CSS, you can write a custom class or ID selector for each different section of the site (that you want a different banner for).

Example

So, here’s the HTML for my header, in the template:

<div id="header">
    <h1><a href="/">Web Site Name</a></h1>       
</div>

And here’s the corresponding CSS:

#header
{
    background: url(/images/header.gif) no-repeat;
    height: 159px;
    width: 791px;
}

#header h1
{
    display: none;
}

As you can see, the header ID calls a background image, which appears on the top of every page.

To swap in a different header image, we have to change the selector, which is currently <div id="header">.

Then, once the selector is changed, we write another CSS rule to match that selector, and apply a different image.

PHP

Again, using the example URI: matthom.com/contact/ - with PHP, I extract just the word contact, to pull in the proper content. At the same time, I can pull in a different header image:

<?php

if ( $url == "contact" )
{
    $header = "<div id='header' class='contact'>";
}
else
{
    $header = "<div id='header'>";
}

?>

Notice the class='contact'. So, when a visitor lands on the Contact page, they will see a different header image.

CSS

All we have left to do is write the CSS to match the contact class.

So, adding to the code from above:

#header
{
  background: url(/images/header.gif) no-repeat;
  height: 159px;
  width: 791px;
}

#header h1
{
	display: none;
}

#header.contact
{
	background: url(/images/header-contact.gif) no-repeat;
}

Notice the alternate image that is pulled: header-contact.gif.

You can do this for as many pages as you’d like. All you need to do is create a new class for each one.

Categories: CSS , PHP , Tutorials , Web Development

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

Matt, is there a way to do this based on page_id? ... Read more.

I am using website baker... if you need to know, basic CMS using php and css ... Read more.

Popular Pages

  1. Fast rounded corners in Photoshop (7423 recent visits)
  2. PHP – passing variables across pages (2558 recent visits)
  3. JavaScript set selected on load (2413 recent visits)
  4. Removing all child nodes from an element (1828 recent visits)
  5. Firefox 3 smart address bar: wildcard search (1755 recent visits)
  6. iPod songs out of order? (1314 recent visits)
  7. Britney - Everytime piano tab (1137 recent visits)
  8. MySQL LEFT JOIN syntax (884 recent visits)
  9. Firefox 3 smart address bar: wildcard search (722 recent visits)
  10. Date difference in MySQL (651 recent visits)

Similar Entries

Stats

190 unique visits since July 2008

Syndicate

Advertisements