Header Banner

[CPC900]

Does anyone know how I can make my header top banner picture continue on the right side indefinately? I don't want to have the image just repeat, I just want the far right edge continue on. But not stretching the whole image, if you understand what I mean?!

[magicflyer]

Try in your css file:

background-size:[width here] [height here];

For example:

background-size:80px 60px;

[freshJet]

If you mean to show the whole text, I think you should edit the image.

[CPC900]

No, I mean....someone once edited this kind of thing before for me. There was, almost like, code that cut off the right side of the image, which was only the colors of the picture, and continued that part on. Almost like it cut off the edge, created a new picture, then made it all look like one. I can't think of how to explain it better, sorry

[freshJet]

Could you draw it in Paint or something?

[CPC900]

http://www.canadianclassicairlines.com/CPC/lib/skins/cpc/images_template1/topbanner2.jpg

Now, I want the pic and text of the pic to obviously not change. But the right side of the picture I want to extend the whole page, regardless of the resolution, with stretching it or repeating the image.

[aarbee]

Why not add a 1000 pixels to the right, with the the banner thing itself?

Make the background div 100% wide, and then it extends.

[tutmeister]

It's pretty simple. Take the banner into photoshop or another image editor, and copy the very last 1 pixel to another file. Save it, upload it, then use the new image as the CSS background image for the header, with repeat-x set. Then create a child div and set the logo as the background to it, or just call it within it as a regular HTML image, your choice.

Anyway, see here for the example: http://jsfiddle.net/tutmeister/X9xyQ/6/embedded/result/

You'll have to excuse the smaller logo, my photobucket account automatically resized it and I couldn't figure out how to make it not resize. The basic idea is that the background will repeat to infinity, thus creating the illusion of a never-ending logo.

[tutmeister]

aarbee, the reason you shouldn't create a very long image is because of the bandwidth it takes up. Both for the client, who will experience longer page loads; as well as the server-side, which will see more bandwidth eaten up. The method I used above is the most efficient way to create the illusion.