CODEWITHSUNDEEP
css
Maulik patel
Maulik patel

Reputation: 1601

not working css background property in chrome

I tried the following code:

CSS:

.bg_left{
        background-image: url(path/image.jpeg);
        background-repeat: no-repeat;
        background-position: left bottom;
         background-color: #FF0000;
         color:#FFFFFF;
         height:150px;

}
table{width:100%;}

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 responsive website tutorial</title>

</head>
<body>
<table>
   <tr class="bg_left">
      <td>Helloo
      </td>
      <td>Logout</td>
    </tr>
</table>
</body>
</html>

But why does it repeat in chrome while it works fine in IE and Firefox?

Upvotes: 2

Views: 1182

Answers (4)

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

CSS 

.bg_left{
  background-image: url(images/banner1.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment:fixed;
  background-color: #FF0000;
  color:#FFFFFF;
  height:150px;
}
table{
  width:100%;
}

HTML

<table>
   <tr class="bg_left">
      <td>Helloo</td>
      <td>Logout</td>
    </tr>
</table>

Upvotes: 3

Tony
Tony

Reputation: 17647

In this case, try moving the class to each of td.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 responsive website tutorial</title>
    <style type="text/css">
        .bg_left {
            background-image: url('http://s1.wallippo.com/thumbs/300x250/background-black-chaninja-hexican-vista-wave-windows-e18886707bb2610e73c06c8f8574c7c5.jpeg');
            background-position: left bottom;
            background-repeat: no-repeat;
            background-color: #FF0000;
            color: #FFFFFF;
            height: 150px;
        }

        table {
            width: 100%;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="bg_left">
                Helloo
            </td>
            <td class="bg_left">Logout</td>
        </tr>
    </table>
</body>
</html>

Upvotes: 0

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

    .bg_left{
        background-image: url(images/6.jpg);
        background-repeat: no-repeat;
        background-position: left bottom;

}
<table>
   <tr class="bg_left">
      <td>
      </td>
    </tr>
</table>

Upvotes: 0

waitingkuo
waitingkuo

Reputation: 93814

The classname is your HTML is bg_left. But you use bg-left is your CSS file

Upvotes: 2

Related Questions