[Solved] Making a Liquid banner

[LinCSS25]

Ok so I am going to do my best to ask this question.

Basically I need to make a banner that is liquid (liquid width). It needs to be able to stretch/open up when the browser is resized. I want to make the banner image and put it in a div (I’m assuming, or something) and when the browser is resized the div widens or shortens (height staying the same) and all it would be doing is revealing more of the banner image’s background evenly on both sides. THere will be a main message graphic area in the middle that needs to stay centered. I am hoping this can be done with just 1 image. Does that make sense?

The 1st time I did it I really restricted myself and I did the main center image and a repeating background that lined up perfectly with in in the BG. I dont want to be restricted to having to have a repeat bg.

Can anyone show me how to do this or give me an example of where this is done?

[noahgelman]

You can have a div centered with margin: 0 auto, with the image centered as well inside that. Set the height of the div to the height of your div. And for the width, set it as a percentage. That way, as the browser stretches, the div stretches, and as the browser shrinks, the div shrinks.

[Author]

Posts