Help Needed to Create a Resizable Feature Area

[rosco]

Hi all,

I’m trying to create a CSS feature banner that I can display at the top of a web page. The banner would consist of a scalable gradient as a background so it always stays at 100% of the parent div and have an image at each end (left and right) of the div that remain fixed to the edge of the banner. I would also like a dedicated space in the centre of the banner for text.

I’ve put together the following example, but it’s been more through trial and error than good practice and I’m sure that there will probably be a better way of achieving this with less code.

View what I’ve done so far…

I welcome any suggestions as to how I could improve this.

Ross

[Paulie_D]

Looks pretty good.

It’s arguable as to whether the images (right & left) should background images rather than inline (in the HTML).

If they are “content” then the latter. If they are more for styling purposes, then the former.

[rosco]

Thanks Paulie, the reason I placed the images within the HTML rather than background images is more to do with how the banner will be used.

The idea being that this will be a template than can be used by different departments within a business. So departments can manually upload their own images into the left and right divs.

Following on from that the next stage would be for me to figure out how people could upload their own images to these divs. Is this something that could be achieved through javascript or php?

[Paulie_D]

From my limited understanding you would need some back end stuff to ‘remember/input’ the images.

I’m guessing PHP would be the way to go but that’s not something I am familiar with.

Perhaps a new thread in the PHP section?

[Author]

Posts