CODEWITHSUNDEEP
javascripthtmlcss
Shashikiran
Shashikiran

Reputation: 43

background image css not displaying

Below is the code for the displaying a number of items on a shopping cart image.

The background image is not displaying.

Style sheet:

div#cart{
    background:url("Cart.gif") no-repeat;

    display:inline-block;
    height:35px;
    width:35px;
    }
#clickCount{ 
    float:left;
    right:-50px;
    top:-15px;
    position:relative;
    background:lightblue;
    border-radius:80px;
    border:1px solid grey;
    height:20px;
    width:20px;
    text-align:center;
}

This is the HTML code where I'm using 2 divs one for the display and other for the count:

<code>
<div><div id="cart"></div><p id="clickCount">0</p></div>
<div id="click">
  <input type="submit"  onclick="myFunc()" value="Cart"> 
    </input>
</code>

Below is the javascript:

function myFunc(){
    var val=document.getElementById("clickCount").innerHTML;    document.getElementById("clickCount").innerHTML=Number.parseInt(val)+1;
}

This is part of my code. The URL works. My HTML is just a regular HTML document with a body etc...

Is there any particular dimensions which I need to consider while choosing an image for this?

Upvotes: 0

Views: 121

Answers (4)

Vasimkhan
Vasimkhan

Reputation: 333

Please check your image if it has 35px*35px dimensions or not,

And if it larger then that of your DIV#cart div dimensions you have to add background positioning properties to CSS.

I have used your code only in below snippet with just google image sprite with positioning properties and it works perfectly fine. 

function myFunc(){
    var val=document.getElementById("clickCount").innerHTML;    document.getElementById("clickCount").innerHTML=Number.parseInt(val)+1;
}
div#cart{
    background:url("https://www.google.com/images/nav_logo225.png") no-repeat right -35px ;

    display:inline-block;
    height:35px;
    width:35px;
    }
#clickCount{ 
    float:left;
    right:-50px;
    top:-15px;
    position:relative;
    background:lightblue;
    border-radius:80px;
    border:1px solid grey;
    height:20px;
    width:20px;
    text-align:center;
}
<div><div id="cart"></div><p id="clickCount">0</p></div>
<div id="click">
  <input type="submit"  onclick="myFunc()" value="Cart"> 
    </input>

Or can check this fiddle as well.

Thanks.

Upvotes: 0

Shashikiran
Shashikiran

Reputation: 43

I missed giving dimensions for the image.

#cart{
    background-image: url("Cart.gif");
      background-size: 35px 40px;
    display:inline-block;
    height:35px;
    width:35px;
    }

Upvotes: 0

spatacca
spatacca

Reputation: 11

In your CSS remove the div text infront of #cart code should then be #cart{

EDIT:: Also your Cart.gif must be 35px x 35px or smaller since you are setting that dimension in the Css. If its larger than this you could only be seeing the top left corner of the image which could be white space

Here is example using a placeholder image for cart

#cart{
background:url("https://placeholdit.imgix.net/~text?txtsize=8&txt=cart&w=35&h=35") no-repeat;

display:inline-block;
height:35px;
width:35px;
}
#clickCount{ 
float:left;
right:-50px;
top:-15px;
position:relative;
background:lightblue;
border-radius:80px;
border:1px solid grey;
height:20px;
width:20px;
text-align:center;

}

Upvotes: 1

Wes Foster
Wes Foster

Reputation: 8900

It could be because there is nothing in the div#cart. Try placing a whitespace character &nbsp; inside of it.

<div><div id="cart">&nbsp;</div><p id="clickCount">0</p></div>
<div id="click">
  <input type="submit"  onclick="myFunc()" value="Cart" />
</div>

Side note: <input> tags do not need a closing tag.

Upvotes: 0

Related Questions