background image css not displaying

Question

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?

Does "Cart.gif" exist in the same directory as the stylesheet? — Wes Foster
– Wes Foster, Commented Jul 15, 2015 at 2:32
Could you check in the developer tools whether the picture is being recognized with the expected URL and whether it is being loaded? — Sebastian Simon
– Sebastian Simon, Commented Jul 15, 2015 at 2:34
the picture was displaying when i chose the inspect element in chrome — Shashikiran
– Shashikiran, Commented Jul 15, 2015 at 2:36
there's a bit of a "code smell" how come you have an extra div surrounding the cart and count? — marblewraith
– marblewraith, Commented Jul 15, 2015 at 3:02

spatacca · Accepted Answer · 2015-07-15 03:20:40Z

1

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;

}

edited Jul 15, 2015 at 3:20

answered Jul 15, 2015 at 2:53

spatacca

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wes Foster · Accepted Answer · 2015-07-15 02:35:31Z

0

It could be because there is nothing in the div#cart. Try placing a whitespace character   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.

answered Jul 15, 2015 at 2:35

Wes Foster

8,9005 gold badges45 silver badges64 bronze badges

Comments

Shashikiran · Accepted Answer · 2015-07-15 06:13:44Z

0

I missed giving dimensions for the image.

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

answered Jul 15, 2015 at 6:13

Shashikiran

436 bronze badges

Comments

Vasimkhan · Accepted Answer · 2015-07-15 06:15:31Z

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.

Collectives™ on Stack Overflow

background image css not displaying

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related