Hello, again!

In order to display my banner the way I wanted it, the solution I was provided (here on DaniWeb) was to set height and width to 100%. It works great!! Check it out: seblake.com. (And I appropriately closed the topic.)

However, I recently discovered that when it is rendered in Chrome...it fills the width OK, but the height took up 1/2 of the screen! Using due diligence, I ran across browsershots.org. It does it there, too (in Chrome).

Any suggestions on how I fix it?

<body >
<img src="images/MTBan.bmp" alt="Max-Tech Banner" width="100%" height="100%" />
<div id="container">
<br />

Thanks!! Appreciate any and all comments.

< Steve >

7 Years
Discussion Span
Last Post by almostbob

Just a thought, but why not have the banner a static size and then have a repeatable background. It will look a lot cleaner than a stretch out image (which is how it looks in all browsers)


Thanks for the thought!

I tried that earlier and it left gutters on both sides. Also, it didn't look good at all when the window was resized. (Maybe I was doing something wrong...)

The jpg I use includes the text as well as the background. That was the only way I could get the proportions I wanted independent of the size of the window. With the text as part of the jpg, I don't think a repeatable background would do the trick. Am I too far off kilter?


< Steve >


why dont you make it a static picture with its actual width and height and set it to center? it would look much better i think


Yuk! you're right it looks awful. There is nothing particularly advanced bout this image to insist that it has to be an image.

The banner can be produced by a repeating tile (blue background) and plain yellow text. If you have to use an image for the text, do just that. Use a simple img tag or even a css background image on top of the tiled background.

Not all browsers support multiple backgrounds, so you'll need to place an inner tag for the text image, e.g. div.


a 380K bmp, its huge,
and at 2160 screen width, it pixellates 'remarkably'
looking at the image in the cache its about 150*125 repeat-x, if you cut just one tile of the background image and styled the div as
background:url('sliced-pig.jpg') repeat-x;
and wrote yellow times-roman 3em text over it

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.