How can I center a CSS background image as if the image had a different width (without cutting the bgimg off)?

I'm attempting to add a bookmarklet to my wop website. The issue is that I would like to have the bookmarklet (highlighted in red in the picture below) centered as if it did not have the arrow sticking out the side. If I change the width of the bgimage in the css, to be the same as the below indented box thingies, it centers how I would like it to. But, it cuts off a bit of the arrow. So, my question is, how can I center the bookmarklet as if it had the width of the other indented box thingies.

bookmarklet CSS:

#bookmarklet {
    background-image:url('images/bookmarklet.png');
    width:425px;
    height:175px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:8px;
}

I want the bookmarklet to be centered as if it were(without cutting out the side of the arrow):

#resultbg {
    background-image:url('images/resultbg.png');
    width:404px;
    height:347px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-top:8px;
}

Any help is greatly appreciated! Thank you(:

Answers


measure the amount of pixels the arrow 'sticks out' from the box, divide it by two and make it your left margin

That's the first thing that came into my mind. However, you are using the left margin to center the image in the first place. Maybe have a container div, center this div with margin-left: auto and margin-right: auto, and then play with the margins of the image inside this div. That should work


Just add

background-position:center;

To the background which should be centered


A few options:

  1. Reduce the width of the image and pad the side with some blank space that way it wont get cut off.
  2. Wrap the image in a div and set the width so the backgroung image is positioned as needed using some padding or margins.

Need Your Help

C# writing object to binary file

c# .net

I have to write an object in to binary file.My struct looks like this.