CPC900 Posted November 13, 2012 Report Share Posted November 13, 2012 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?! Quote Link to comment Share on other sites More sharing options...
magicflyer Posted November 13, 2012 Report Share Posted November 13, 2012 Try in your css file: background-size:[width here] [height here]; For example: background-size:80px 60px; Quote Link to comment Share on other sites More sharing options...
freshJet Posted November 13, 2012 Report Share Posted November 13, 2012 If you mean to show the whole text, I think you should edit the image. Quote Link to comment Share on other sites More sharing options...
CPC900 Posted November 13, 2012 Author Report Share Posted November 13, 2012 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 Quote Link to comment Share on other sites More sharing options...
freshJet Posted November 13, 2012 Report Share Posted November 13, 2012 Could you draw it in Paint or something? Quote Link to comment Share on other sites More sharing options...
CPC900 Posted November 13, 2012 Author Report Share Posted November 13, 2012 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. Quote Link to comment Share on other sites More sharing options...
aarbee Posted November 14, 2012 Report Share Posted November 14, 2012 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. Quote Link to comment Share on other sites More sharing options...
tutmeister Posted November 14, 2012 Report Share Posted November 14, 2012 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. 1 Quote Link to comment Share on other sites More sharing options...
tutmeister Posted November 14, 2012 Report Share Posted November 14, 2012 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.