0

I am currently designing a navbar for a site; I made each navbar "tab" a data cell in a table with a background image in each cell. Because my background image is not the exact width of the cell, the background image does not span the width of the cell.

How do I stretch the x-axis of a background image in a table cell while maintaining the entire height of the image? Or to put it another way, how do I NOT maintain the aspect ratio of a background image while stretching it in a certain direction by just using CSS? I am satisfied with the verticality of the image, but I want to stretch it horizontally.

Hope this makes sense.

HERE'S WHAT I HAVE, CODE-WISE:

<div class="navbar">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" text-align=>
  <tr>
    <td class="navtab"><a href="index.html">HOME</a></td>
    <td class="navtab"><a href="hours-location.html">HOURS AND LOCATION</a></td>
    <td class="navtab"><a href="#">ABOUT US</a></td>
    <td class="navtab"><a href="#">CONTACT US</a></td>
  </tr>
</table>
</div>

.navtab {
    background-image: url(navtab.png);
    background-size: 100%, auto;
    height: auto;
    width: 200px;
    display: table-cell;
}
anothermh
  • 9,815
  • 3
  • 33
  • 52
Elizabeth K
  • 1
  • 2

1 Answers1

0

Annotated example below, the key style is background-size which I use to stretch the image horizontally but not vertically:

.skinny-image {
  /* using 100x100 image */
  background: url(https://source.unsplash.com/random/100x100);
  /* 100% width on the x-axis, use image dimensions for y-axis */
  background-size: 100%, auto;
  height: 100px;
  /* but our cell is 200px wide */
  width: 200px;
  display: table-cell;
}
<div class="skinny-image"></div>

Using your example code above:

.navtab {
    background-image: url(https://source.unsplash.com/random/100x100);
    background-size: 100%;
}
<div class="navbar">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" text-align=>
  <tr>
    <td class="navtab"><a href="index.html">HOME</a></td>
    <td class="navtab"><a href="hours-location.html">HOURS AND LOCATION</a></td>
    <td class="navtab"><a href="#">ABOUT US</a></td>
    <td class="navtab"><a href="#">CONTACT US</a></td>
  </tr>
</table>
</div>
pretzelhammer
  • 13,874
  • 15
  • 47
  • 98
  • kfedorov91 has a good answer but if you run into problems, you might want to look at this link. It explains how to override a tables' properties. These properties will/may restrict any changes you want to make. https://stackoverflow.com/questions/1519271/what-is-the-best-way-to-override-an-existing-css-table-rule – sjgallen Aug 20 '18 at 02:11
  • @kfedorov91 I edited my post to include my code. I tried using the code you provided and the height is too high and doesn't show the curve at the bottom of my tab. Can you tell from my code what I am doing wrong? – Elizabeth K Aug 20 '18 at 04:53
  • @ElizabethK I added explicit heights and widths in my example for illustrative purposes, those aren't required. I've updated my answer with a new snippet using the example code you added to your question. – pretzelhammer Aug 20 '18 at 05:27