CODEWITHSUNDEEP
htmlcss
jskidd3
jskidd3

Reputation: 4783

Offset background image from center?

If I were talking about offsetting the background from the top I could just do this:

background-position: top 10px center;

I have just tried applying the same logic to a vertically central offset:

background-position: center 10px center;

Why does this not work? Is there a solution to do this purely using CSS or do I need to wrap the background in its own div (not my preference).

The HTML for the div:

<table id="tabs">
    <tr>
        <td id="tab-map">Map</td>
        <td id="tab-news">News</td>
        <td id="tab-timetables">Timetables</td>
        <td id="tab-favourites">Favourites</td>
        <td id="tab-more">More</td>
    </tr>
</table>

It is the <td> elements that have the background image.

Upvotes: 0

Views: 77

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

That's unfortunately not how background-center values work. center is just shorthand for 50%. Thus what you attempted to do is background-position: 50% 10px 50%;, which as you noticed, doesn't work. Unless you can represent that offset with a percentage value (e.g. 51% or 49.5%), background-position isn't going to be able to do what you need it to. If it has to be a pixel based offset, I suggest just what you had considered: a wrapping container.

Upvotes: 2

Related Questions