Member Avatar for mmiikkee12

http://compuchat.freeownhost.com (sorry for the link, I just thought it might help if people could see the problem)

On the bottom of the page, the title of the "Who's Online" section uses the same background image as the category headers, but it tiles on 1024x768 (and others report that all the categories also tile on 1280x1024.) How can I make this stretch instead of tile with CSS?

  • 2 Contributors
  • 4 Replies
  • 199 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mmiikkee12

Dani AI

Generated

Short answer: use CSS background properties (no-repeat + background-size) on the header cell or a wrapper element so the graphic scales instead of tiling. That solves the cross‑resolution problem without changing table widths.

Example (apply a class to the header cell or to a div inside it):

/* keep image ratio but stretch to full width */
.category-header {
  background-image: url("path/to/header-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

/* force the image to fill both width and height (will distort aspect) */
.who-online-title {
  background: url("path/to/header-bg.png") no-repeat center center;
  background-size: 100% 100%;
}

Notes and troubleshooting:

  • Use 100% auto when you want the image to fill the width but preserve its aspect ratio; use 100% 100% only if distortion is acceptable. cover and contain are alternatives when you want the image to fill or fit the area without explicitly setting both dimensions.
  • Make sure the element you target has predictable dimensions. For table cells, wrap the text in a block (e.g., a div with the class) or set a fixed/min-height so vertical scaling behaves as expected.
  • Remove any HTML background attributes so CSS rules control the rendering; inline HTML attributes can conflict or be harder to override.
  • For very old browsers that lack background-size, use a simple fallback: slice the artwork into fixed left/right caps plus a repeatable center (repeat-x), or place a stretched image behind the content. If you need crisp results on high‑DPI screens, supply a 2x source and scale it down with background-size.

This addresses the tiling problem across resolutions and keeps presentation in CSS so headers stay flexible and consistent.

Recommended Answers

All 4 Replies

Member Avatar for mikeandike22

you can just do it with the table attributes, like find the table you want and <table height="w/e" width="w/e">

Member Avatar for mmiikkee12

I don't need to change the table width, I just want to stretch the background image.

Member Avatar for mikeandike22

change the image attributes the same way like you would a table, like <img and then the attributes.

Member Avatar for mmiikkee12

But I need this to also work for different resolutions, and on top of that, it's CSS and would be <td background=whatever> if it wasn't...

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.