Question

Is there a pure css way of setting your div width to the width of the background image you are using for that div?

for instance right now I’m doing this…

#homeNav{

    background-image:url(../images/navPieces/home.jpg);
    width:165px;
    text-align:right;

}
#aboutNav{

    background-image:url(../images/navPieces/about.jpg);
    width:81px;
    text-align:center;

}
#competitorsNav{

    background-image:url(../images/navPieces/competitors.jpg);
    width:117px;
    text-align:center;
}

I’d love to NOT have to write in the width of every div.

Any suggestions?

Answer 1

Unfortunately no, there isn’t. The CSS doesn’t know the width of specified background images. You could do it with a bit of Javascript that preloaded the images and then set the div widths.