Css/Webkit: Background Images for Table Row

CSS/WebKit: Background Images for Table Row

Will your table always only have two rows? Such as:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

If so, a simple, but not overly elegant, solution would be to split your background image into two images, and apply a CSS class to the left and right column, applying half of the arrow to the right side of the left column, and to the left side of the right column:

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

Your CSS could then be similar to:

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

You could also use a sprite image where you use one image and position it differently for the two backgrounds.

I realize it's probably not the most ideal solution, but it would at least fix your issue and get your project moving. I sometimes use simple solutions such as this in order to make forward progress, and then revisit the problem to make it more efficient later.

Background-image for table

Do you have to use Tables (is it an HTML email?) or can you just use a div layout? If you must use the TABLE then try altering the CSS in the code to look like this:

tr {display: block;}
td {display: inline-block; background: transparent;}

HTML table with background color and transparent image: border on bottom

Most likely because you are trying to divide a width by a number of items that isn't evenly divisible. Your fiddle works for me in Chrome, which makes sense because 480 / 6 = 80px, so no border. If you were to make the width 481, then you've got five cells of 80px and one cell of 81px (the cells have to be "on" a pixel). Because the images are set to 100% width, that makes the image in the 81px cell slightly taller as well, and makes the entire table row an extra 1px taller. But because the images in the 80px cells are the old height, it seems to add an extra px to the bottom padding.

All of those nested tables are going to cause problems. I would go back to the drawing board as far as layout is concerned. Why not simply have a <div> with several <button>s in it side-by-side?

How do I make background Image on each division row from URL

In CSS
#background-container ---> Single tag in HTML

.background-container ---> Multiple tag in HTML

The problem is you overwrite the last one

Change

#background-container { 
  display:table;
  width:100%;
  border-collapse:collapse;
  background: url(<?php echo  $bgurl; ?>) center;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class="container" id ="background-container">

By

.background-container { 
  display:table;
  width:100%;
  border-collapse:collapse;
 
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class="container" class="background-container" style="background: url(<?php echo  $bgurl; ?>) center;">

Or something similar.

background image to automatically Resize in table Cell

With CSS3 you can resize your background with the background-size property:

Adding this to your CSS will stretch the background to 100% width and 100% height, in the latest browsers.

td {background-size: 100% 100%;}

This may undesirably skew the image however, so you'll probably prefer to use just background-size: 100%; which sets the width to 100% and the height to auto.

To support slightly older browsers you'll need to use vendor prefixes, like so:

-moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100%; /* Opera 9.5 */
-webkit-background-size: 100%; /* Safari 3.0 */
-khtml-background-size: 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */

The above example is from this site, and the full spec is here - http://www.w3.org/TR/css3-background/#the-background-size

css 3 images in td

Try

.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat;
}

without the three parameters on background-repeat.

And keep in mind that this is not working on every browser.

I suggest you use the old fashion way to resolve this. Put a link on every picture with the same href.

Applying a single background gradient to a table row

set background-attachment:fixed; on thead and it will work fine

http://jsfiddle.net/cGV47/64/

Table with border image

You might be looking something like this.

td,th {  border: 0;  border-color: transparent;  border-style: solid;  -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;  border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;  border-width: 0 0 25px;}

.table {  border: 0;  border-color: transparent;  border-style: solid;  border-width: 25px;  -moz-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;  -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;  -o-border-image: url(https://www.w3schools.com/cssref/border.png) 27 round;  border-image: url(https://www.w3schools.com/cssref/border.png) 27 fill round;}

<table class="table table-bordered">  <thead>    <tr>      <th>Foo</th>      <th>Bar</th>      <th>Lols</th>    </tr>  </thead>  <tbody>    <tr>      <td>        something here      </td>
      <td>        whatever      </td>
      <td># 6,0% / 12% wag.      </td>    </tr>  </tbody></table>

---

Related Topics