background image failing me with simple css

Question

I'm sure there is a ridiculously simple answer for why this simple example is not showing my the background image but I just don't see it. I'm expecting to see the image twice, once when the image uses the class, and once when it references the image directly.

Thoughts

    <!DOCTYPE HTML>
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            .chkCombo {
                background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
            }
        </style>
    </head>
    <body>
         <div class="x">
           <img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="chkCombo">
        </div>
         <hr />
            <div class="x">
           <img  src="http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png" />
       </div>
    </body>
    </html>

How big is the base64 image and what is it an image of? If you set background image of an img tag using CSS, the actual img will overlay on top of the CSS background. — ninty9notout
– ninty9notout, Commented Sep 2, 2013 at 17:33
the image is just simple small public image. I'm expecting to see 2 images and I only see one. the base64 image is right there. it's just a 1x1 invisible gif. try it. — Peter Kellner
– Peter Kellner, Commented Sep 2, 2013 at 17:40

Shahar Galukman · Accepted Answer · 2013-09-02 17:38:34Z

1

By adding height and width to the image and setting it to display: block; the image will appear.

Here is a the fixed fiddle

By the way, I don't see the effect of the base64 image, you use it and also using a class with background image on the same element.

answered Sep 2, 2013 at 17:38

Shahar Galukman

9123 gold badges16 silver badges36 bronze badges

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

2 Comments

Peter Kellner Over a year ago

I'm not 100% sure why I have the base64 image. It's from an ExtJS example that I am working with. I thought it had something to do with taking up the space before the class is applied but I'm not sure.

Shahar Galukman Over a year ago

Well, it doesn't work as you can see. The base64 code seems too short honestly. In case you have no use of the image as base64 you can simply drop it.

Krimson · Accepted Answer · 2013-09-02 17:44:10Z

0

Try using this style

.chkCombo {
    height: 56px;
    width: 350px;
    background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}

A jsFiddle demo

P.S: A background image is litteraly a "background" image so if an element has no dimentions(height and width) then the background image will have no dimentions. Therefore you need to give it a hight and width

answered Sep 2, 2013 at 17:44

Krimson

7,73911 gold badges65 silver badges104 bronze badges

Collectives™ on Stack Overflow

background image failing me with simple css

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related