Member Avatar for hno

HI

I have a probleme with the background image of the table . you know ,when we using the img tag for showing an image ,it is possible to determine the width of it but how can do it for a table ?

I want to wide the background image to make it fit of the table . it is an image and i don't want to repeat it , i just want to make it wider , i mean increase the image's width to fit the table

how can I do so ?

thanks

  • 4 Contributors
  • 3 Replies
  • 111 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by leahmarie

Dani AI

Generated

The table background is treated differently from an <img> element: a CSS background is drawn by the browser and you control its scaling with CSS rather than an img width attribute. wanted the background to fill the table without repeating — that is exactly what background-size is for. was right that editing the source image gives the best quality if you need to enlarge beyond the image's native pixels; 's point about stretching to the container is valid, but be aware of aspect-ratio distortion; is correct that using an actual <img> gives different options if you switch approaches.

A simple, reliable approach is to set the table (or the cell you want) a non-repeating background and control how it scales. Use background-size: cover to fill and crop, or background-size: contain to fit without cropping. Example:

.table-bg {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

If you need the image to always fill the table without CSS cropping (and want more control over fitting), place an <img> behind the content and use object-fit: cover so the image scales like a background but stays an element:

.wrapper { position: relative; }
.wrapper img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

Notes: stretching to 100% width can blur low-resolution images — use a higher-resolution or vector source for large tables. background-size is widely supported in modern browsers; for legacy browsers without support, fall back to a pre-resized image. See the spec and examples at the MDN docs for background-size and object-fit for details and compatibility: background-size on MDN and object-fit on MDN.

Recommended Answers

All 3 Replies

Member Avatar for emhmk1

Can you not use a paint programme to modify th image?
if not try some CSS

<style type="text/css">#img{
background-image:url(___PATH TO IMAGE___);
height:413;   Height of table
width:427;    Width of table
}
</style>
</head>

<body><table width="413" id="img" height="427">

  <tr>................etc etc etc </form>

Hope that helps

Edited by emhmk1 because: missed off code tag
Member Avatar for MidiMagic

Width: 100%;

Member Avatar for leahmarie

I think you can put width attribute in the img tag then specify exactly the width of your 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.