Member Avatar for seblake

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 >

  • 5 Contributors
  • 5 Replies
  • 115 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for stbuchok

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)

Member Avatar for seblake

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 >

Member Avatar for matricol

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 for 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.

Member Avatar for almostbob

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.