Creating A Fluid Width Banner (With Images) Using CSS

Creating a fluid width (extensible) banner is quite easy but using one that has images is a bit tricky. In this article, I am going to explain how to create a fluid width image banner.

Introduction

Fluid width means the banner must keep it's aspect, no matter the browser / screen width (more or less). For instance, if we have a banner with an image on the right side and some text on the left, it's not that easy making the banner expand / shrink so that it looks the same on any screen resolution. But with some CSS, this can be done in just a few minutes.

Fluid Width Banner example

Go to the DEMO PAGE and change the size of your browser's width. The banner will look the same, even if you shrink or enlarge the window (sure, if you shrink it too much, It won't look good anymore, but that's because I used 2 quite large images for the left and right parts of the banner; I guess I could have made them smaller but it's all the same in the end...).

You can look at the source code of that page. You'll notice that the whole banner is not just one image, but actually three.

Creating the extensible (fluid) banner

Basically, the banner you saw in the example above uses three images: one for the text on the left, the car on the right and a tiny black portion for the extensible part in the middle.

Here are the 3 images I'm talking about:

• Left
• Right
• Center

So you'll need to cut off the left and right parts of your banner and create an intermediary image for the center part which must have the same height as the left and right images.


Here is the CSS for the banner I just created:

#center {
background-image: url(http://www.netupd8.com/w8img/1opsao.jpg);
background-repeat: repeat-x;
height: 235px;
width: 90%;
margin-right: auto;
margin-left: auto;
}
#left {
background-image: url(http://www.netupd8.com/w8img/2v0l7hh.jpg);
height: 235px;
background-repeat: no-repeat;
width: 237px;
float: left;
margin-left: -15px;
}
#right {
background-image: url(http://www.netupd8.com/w8img/2q1w7io.jpg);
background-repeat: no-repeat;
height: 235px;
width: 482px;
float: right;
margin-right: -15px;
}

As you can see, the id's are pretty self-explanatory (#left, #right, #center - replace the image I used with yours, also modify the width and height with the values for your images).

Then, to display the fluid width banner, you have to create a div with the id="center" and place the left and right div id's in this center id div which will be the main div holding the banner. But to understand better, take a look at the following code:

<div id="center"><div id="left"></div><div id="right"></div></div>

That will be enough to display our expandable banner. Enjoy!