Can’t display an image sprite

  • Hello,

    Please help me. I am have a really tough time trying to display an image sprite.

    In used SpritePad to generate a test Sprite PNG ( see sprites.png file attached) as well a the appropriate Sprite CSS:

    .icno-taza de cafe 180×180, .icono-taza cafe 128×128 {
    background: url(https://labolsitadecafe.com/wp-content/uploads/2017/01/sprites.png) no-repeat;
    }

    .icno-taza de cafe 180×180 {
    background-position: 0 0;
    width: 180px;
    height: 180px;
    }

    .icono-taza cafe 128×128 {
    background-position: -336px -237px ;
    width: 128px;
    height: 128px;

    I then added the above Sprite CSS to my child theme’s style.css.

    I then added the following html to a widget in order to display the .icno-taza de cafe 180×180 image:

    I also tried:

    <div class ═ “.icno-taza de cafe 180×180”></div>

    But no image displays.

    I am stumped.

    Patrick Yepez

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Your CSS has syntax errors derived from the spaces used in your class. Each element separated by a space is considered a new class. In CSS, each individual class must be preceded by a dot, but not in HTML. I suspect it’s not your intention to have individual classes like “de” or “180×180”. So just tie everything together with hyphens.
    <div class═"icno-taza-de-cafe-180×180">

    .icno-taza-de-cafe-180×180 {
background-position: 0 0;
/* etc. */
}
    Thread Starter Patrick Yepez

    (@patrick-yepez)

    Hello bcworkz,

    Taking your advice into consideration. I tried testing a new image sprite and I got part of it to display. The CSS is as follows:

    .sidebox-social {
    padding: 0px 0px 5px 0px;
    }

    .sidebox {
    width: 100%;
    margin: 0px 0px 5px 0px;
    }

    .sidebox-social a:link, .sidebox-social a:visited, .sidebox-social a:hover, .sidebox-social a:active {
    float: left;
    width: 35px;
    height: 35px;
    margin: 10px 5px 10px 5px;
    padding: 5px;
    text-indent: -9999em;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    background-color: transparent;
    background-image: url(‘https://labolsadecafe.com/wp-content/themes/Builder-Everett-Custom/images/sprites.png&#8217;);
    background-repeat: no-repeat;
    }

    .rsz_icono_facebook-35×35{
    background-position: -224px -282px;
    width: 35px;
    height: 35px;
    }

    .rsz_icono_youtube-35×35{
    background-position: -325px -304px;
    width: 35px;
    height: 35px;
    }

    .rsz_icono_instagram-35×35{
    background-position: -381px -274px;
    width: 35px;
    height: 35px;
    }

    The HTML is:

    <ul class=”Heading”>

    <div class=”sidebox sidebox-social”>
    <li class=”Heading”><div class=”imgleft”>Facebook</div>

    <li class=”Heading”><div class=”imgcenter”>Youtube</div>

    <li class=”Heading”><div class=”imgright”>Instagram</div>
    </div>

    The part that I can not get to display is:

    .rsz_logos_tarjeta {
    float: left;
    width: 324px;
    height: 44px
    background-image: url(‘https://labolsadecafe.com/wp-content/themes/Builder-Everett-Custom/images/sprites.png&#8217;);
    background-repeat: no-repeat;
    }

    .rsz_logos_tarjetas{
    background-position: -604px -282px;
    width: 324px;
    height: 44px;
    }

    The HTML I used was:

    <div class=”rsz_logos_tarjetas”></div>

    Please help,

    Patrick

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Can’t display an image sprite’ is closed to new replies.

Tags