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

Thanks!! Appreciate any and all comments.

< Steve >

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?

Thanks!!

< 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

Member Avatar

diafol

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