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
  • 123 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A few practical points that address the Chrome problem and improve the banner overall.

Browsers treat percentage sizing on images inconsistently, so avoid setting both width and height to 100% on the image. Preserve the aspect ratio and get consistent behavior by using CSS to constrain the image, for example:

.site-banner img {
  max-width: 100%;
  height: auto;
  display: block;    /* removes inline gap/gutters */
}

This keeps the banner full-width without forcing an arbitrary height that can expand unexpectedly in some engines.

If the banner is mostly a repeating background with text on top (as suggested by , and ), slice out a small horizontal tile from the large BMP and use it as the header background. This reduces file size drastically and lets the header text be real HTML (better for accessibility and SEO) instead of baked into the image. For a full-bleed decorative banner where you want the image to cover the area, use a background on the header and let the browser scale it:

.site-header {
  background-image: url('/images/tile.jpg');
  background-repeat: repeat-x;
  background-position: center top;
  background-size: cover;   /* scales to fill while keeping aspect ratio */
}

Performance and compatibility notes: replace the BMP with a web format (JPEG for photos, PNG for flat graphics), optimize/compress the file, and consider srcset or higher-resolution assets for Retina screens to avoid pixelation (as noticed). Also check the page DOCTYPE and inspect computed styles in Chrome DevTools—percent heights depend on parent heights, so an unexpected ancestor style can make 100% height behave oddly.

These steps will fix the Chrome rendering, reduce load time, and make the banner scale cleanly on different viewport sizes (and address ’s centering suggestion by centering the container when using a fixed-width approach).

Recommended Answers

All 5 Replies

Member Avatar for Member #905211

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 Member #120589

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.