Search code examples
htmlcssbackground-image

Setting background image to div in css leaving an offset in left and right

I have a set of divs in html 5 having class name submenuButton. I want to add a common background image to these divs using css. I tried the following:

.submenuButton{
     background-image:url(images/but-up-center.png); 
     background-position: 5px 0px;
     background-repeat:repeat-x;
     background-size: contain;
}

This sets the div image leaving 5px from the left and extends to the end of the button. But I want to have this image ended at 5px from the right also.

So, could anybody suggest what can be done in the css so that it leaves 5px space both on the left and the right.

Solution

  • You could use background-clip: content-box; in combination with a 5px padding left and right.

    This would give you the following code:

    .submenuButton{
    padding: 0 5px;
    background-image:url(images/but-up-center.png);
    background-repeat:repeat-x;
    background-size: cover;
    background-clip: content-box;
}

    More information on background-clip can be found on developer.mozilla.org

    Example on jsFiddle