CODEWITHSUNDEEP
css
slandau
slandau

Reputation: 24052

CSS background image repeat not displaying

background: url("/Img/chic/gradient.JPG") repeat-x scroll 0 0 transparent;
color: White;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: bold;
margin-bottom: 1px;
padding: 2px 0 3px 15px;
position: relative;
text-decoration: none;
vertical-align: text-bottom;
width: 100px;

That is the outputted CSS on the button gotten from Firebug. The background is not displaying however.

This is how the CSS is declared in the code:

.navigationTab
{
    position:relative;
    color:White;    
    width:100px;
    font-size:11px;
    font-weight:bold;
    margin-bottom:1px;
    cursor:pointer;
    padding:2px 0px 3px 15px; 
    vertical-align:text-bottom;
    text-decoration:none;
    display: block;
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2273ba', endColorstr='#1B62A0', iOrientation=1); /* for IE */
    /*background: -webkit-gradient(linear, left top, left bottom, from(#2273ba), to(#1B62A0)); /* for webkit browsers */
    /*background: -moz-linear-gradient(top,  #2273ba,  #1B62A0); /* for firefox 3.6+ */
    background: url(/Img/chic/gradient.JPG) repeat-x;

}

Am I declaring the background wrong?

HTML:

<a href="/Extranet/mvc/Indications.cfc/rates/8bfe5685-5de1-4cba-b5bd-9c128fb513bb" class="navigationTab" id="ctl00_ratesLink">
    <img src="/Extranet/img/chic/plugin.png" style="vertical-align: text-bottom;"><span style="padding-left: 5px;">Rates </span>
</a>

Upvotes: 1

Views: 645

Answers (1)

JohnFx
JohnFx

Reputation: 34909

Have you checked that the image path is correct?

One thing to watch out for is that if the style is defined in an external style sheet, relative image paths are relative to the .css file not the HTML page.

Upvotes: 1

Related Questions