Improving HTML and CSS on using background images

Question

Is there a better way to have the same output generated by the following code?

The HTML code is:

<div class="imaged backgrounded"></div>
<div class="title">
  Title test text
</div>

The CSS code is:

.imaged {
    background: transparent url("/images/sprites.png") no-repeat;
    float: left;
    height: 24px;
    margin: 0 8px 0 0;
    width: 24px;
}

.backgrounded {
    background-position: -16px -106px;
}

.title {
    display: inline-block;
    margin-top: 2px;
}

score 2 · Accepted Answer · edited May 23 '17 at 12:19

What you have looks fine.

Here are some trivial improvements:

The default background-color is transparent, so you don't need to specify it.
You don't need quotes around that image url.
I would put the width and height properties next to each other, because they are related.
display: inline-block doesn't work on elements that aren't naturally inline in IE7, a browser that still unfortunately has some market share. If your site has any IE7 users, you should fix it.

So, this is the final result:

.imaged {
    background: url(/images/sprites.png) no-repeat;
    float: left;
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
}
.backgrounded {
    background-position: -16px -106px;
}
.title {
    margin-top: 2px;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

You should also consider changing <div class="title"> to something more semantic, such as h2 or h3 depending on how important the titles are.

Yes, this is all very pedantic.

score 0 · Answer 2 · answered Jul 18 '11 at 05:05

0

You never create separate class for background position. you can also do like below

.imaged {
    background: transparent url("/images/sprites.png") -16px -106px no-repeat;
    float: left;
    height: 22px;
    margin: 0 8px 0 0;
    padding: 2px 0px 0 0;
    width: 24px;
}

.title {
    display: inline-block;
}

answered Jul 18 '11 at 05:05

Mr.T.K

2,318
6
26
42

1

Why I should never create separate class for background position? – Backo Jul 18 '11 at 05:10
In that class you have used only background-position, that can be assing in imaged class itself. – Mr.T.K Jul 18 '11 at 05:14
2

Actually, creating separate classes for `background-image` and `background-position` can be very helpful. It's a standard way to put, say, forty images into just one sprite image, and then have a separate class for each `background-position` defining their coordinates. Very efficient. Can be annoying to work out though. – Will Martin Jul 18 '11 at 05:16
1

What you have is fine. What are you trying to improve? – gxc Jul 18 '11 at 07:58

score 0 · Answer 3 · answered Jul 18 '11 at 10:53

0

I agree with Will, I always put my background positions on a new line.

.imaged {
background: transparent url("/images/sprites.png") no-repeat;
background-position: -16px -106px;
float: left;
height: 24px;
margin: 0 8px 0 0;
width: 24px;
}

But you can also do it the shortened way

background: transparent url("/images/sprites.png") no-repeat -16px -106px;

answered Jul 18 '11 at 10:53

Magnum26

265
2
13

I think will meant that you can specify several div's to use the same background sprite, then use background position to individually position the sprite. Having the background and background-position statements as above is redundant, just merge them into background. – addedlovely Jul 18 '11 at 11:46

Improving HTML and CSS on using background images

3 Answers3