Using css sprites without html

Question

I have created a css sprite image for multiple images. The css for sprite is:

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

Now I want to assign the first image from this sprite to an li element. Currently the first images is assigned using background:url property of this li as:

li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)

How can bring the first image from sprite and assign to the li element. I have seen an example which suggests to use:

<div class="sprites" id="image_5306605314403955_gif"></div>

But I want to see if adding HTML can be avoided and use CSS only for that purpose. The li element on my page looks like:

<li><a href="http://www.xyz.com">ABC</a></li>

Have you considered using LESS or SASS? It's not 100% what you're looking for as it requires you to compile the stylesheet first, but with mixins it would achieve a similar affect. lesscss.org/#-mixins — sam
– sam, Commented Nov 3, 2012 at 17:21
Any chance you could post a JS Fiddle demo that we can work with? This shouldn't be difficult, but it'd be easier to assist with if we had access to your work-so-far. — David Thomas
– David Thomas, Commented Nov 4, 2012 at 11:29

MuhammadBassio · Accepted Answer · 2012-11-04 11:26:24Z

I am not sure if that is what you are looking for or not, but the below code should do it:

HTML:

<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>

CSS:

.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}

If what you are looking for is not to use class or id, then I think it is impossible, as your CSS needs an identifier to differentiate between your items (which are inherited from the same class <li>)

Juan Diego Lozano · Accepted Answer · 2020-10-20 08:06:52Z

body {
    overflow-y: scroll
}

.mini_iframe,
.serverfbml_iframe {
    overflow-y: visible
}

.auto_resize_iframe {
    height: auto;
    overflow: hidden
}

.pipe {
    color: gray;
    padding: 0 3px
}

#content {
    margin: 0;
    outline: none;
    padding: 0;
    width: auto
}

.profile #content,
.home #content,
.search #content {
    min-height: 600px
}

.UIStandardFrame_Container {
    margin: 0 auto;
    padding-top: 20px;
    width: 960px
}

.UIStandardFrame_Content {
    float: left;
    margin: 0;
    padding: 0;
    width: 760px
}

.UIStandardFrame_SidebarAds {
    float: right;
    margin: 0;
    padding: 0;
    width: 200px;
    word-wrap: break-word
}

.UIFullPage_Container {
    margin: 0 auto;
    padding: 20px 12px 0;
    width: 940px
}

.empty_message {
    background: #f5f6f7;
    font-size: 13px;
    line-height: 17px;
    padding: 20px 20px 50px;
    text-align: center
}

.see_all {
    text-align: right
}

.standard_status_element {
    visibility: hidden
}

.standard_status_element.async_saving {
    visibility: visible
}

img.tracking_pixel {
    height: 1px;
    position: absolute;
    visibility: hidden;
    width: 1px
}

Collectives™ on Stack Overflow

Using css sprites without html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related