Member Avatar for msmitch

Hi, I'm new here, hope someone can help. With frustration I've tried to figure this out. Creating a web page with a fixed width (pixel) is easy. My problem lies with creating one that is set at 100% How do I create and make the banner go from left to right 100% of the top of the page?

with thanks, msmitch

  • 2 Contributors
  • 5 Replies
  • 110 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Brief recap and the likely cause: tried the three-piece banner inside a 100% table (as suggested). The banner dropping on smaller screens is almost always caused by fixed pixel widths on the images while table cells use percent widths — the images cannot shrink, so the layout breaks or a cell wraps to the next line.

Recommended approach (modern, robust)
Use a single header element with three image slices as CSS backgrounds: left cap (no-repeat), a 1–2px wide center tile that repeats horizontally, and a right cap (no-repeat). This keeps the banner full-width without relying on table cells or fixed <img> widths.

#banner {
  height:104px;
  background:
    url('banner-left.png') left top no-repeat,
    url('banner-right.png') right top no-repeat,
    url('banner-center.png') top repeat-x;
}

Minimal HTML:

<div id="banner"></div>

Fallback for older browsers
If multiple backgrounds are not acceptable, use three block elements: fixed-width left and right (float:left/right) and a center block with margin:0 <right-width> 0 <left-width> and a repeat-x background. That mimics the table approach but keeps the center flexible.

Quick fixes if keeping images in a table

  • Remove conflicting percent widths, or make the image scale with img { max-width:100%; height:auto; display:block; } (note: this scales caps too, which may be undesirable).
  • Ensure the center slice is a seamless tile (1px wide is common) to avoid seams when repeated.
  • Test by shrinking the browser window and on mobile widths; check for overflow or horizontal scroll.

Further reading on CSS backgrounds and multi-background support: Using multiple backgrounds

Recommended Answers

All 5 Replies

Member Avatar for tgreer

Setting a page to 100% is easy. Designing a banner that does so is different. Essentially, you have to divide your image into 3 pieces, a left and right, and a center pieces that is a simple sliver of solid color. That is the piece that will "expand" to fit the size of the page.

Post in the HTML/JavaScript/CSS section if you need more detailed help.

Member Avatar for msmitch

Yes I've tried creating the banner in threes, but testing it on smaller monitors part of the banner appears below. Looks terrible. Anyway to stop this from happening?

Member Avatar for tgreer

I think you need to show us the code you have thus far.

Member Avatar for msmitch

I think I've got it! Fingers crossed that is. I size the window and the banner remained intact! This is what I put together. I hope I posted this right.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin-top: 0px;
    margin-left: 0px;
}
.style1 {
    font-size: 12px;
    font-weight: bold;
}
-->
</style></head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30%" align="left" valign="top" bgcolor="#BA9FBE"><img src="images/images/images/chris-banner_01.jpg" width="213" height="104"></td>
    <td width="41%" align="left" valign="top" bgcolor="#BA9FBE"><img src="images/images/images/chris-banner_02.jpg" width="345" height="104"></td>
    <td width="29%" align="center" valign="top" bgcolor="#BA9FBE"><img src="images/images/images/chris-banner_04.jpg" width="105" height="104"></td>
  </tr>
  <tr bgcolor="#000000">
    <td colspan="3"><div align="center"><img src="images/images/spacer.gif" width="2" height="2"></div></td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td colspan="3"><div align="right" class="style1">Navagation Here </div></td>
  </tr>
</table>
<br>
</body>
</html>
Member Avatar for tgreer

If it works, it works! I'm out of the habit of using tables for layout, so didn't immediately think of placing the image elements inside of a table.

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.