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


Tags: css,stylesheet,background-image,centering

Problem :

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.

enter image description here

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(:



Solution :

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


    CSS Howto..

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to insert variables in inline CSS rules with pure JavaScript?

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How to center two columns using CSS?

    How Would I Center Text In This DIV?

    How to edit CSS style of a div using C# in .NET

    How to position an inner - inner tag at different position?

    How to combine components in HTML header

    how to override user agent CSS

    How to make a GWT-like CaptionPanel manually

    How to add ellipsis to table cells with dynamic width with only CSS?

    Box-shadow is overlapping other elements, how can I fix it?

    How to center a div being focused? [vertically]

    How to increase a CSS value by the value of a JS variable?

    how to create navbar without float?

    how to “replace” css Properties with jQuery

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How do I change my link's image on click?

    How to line up items of varied length in a resizable space in CSS?

    HTML+CSS: How to add shadow (as image) to image?

    How to divide a border into 4 equal parts?

    How to CSS select all cells with colspan set?

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    CSS - How to make a div as wide as a containing child img

    How to draw diagonal lines with css [duplicate]

    How to put text over Image

    How to make a HTML element fill a dynamically sized container using CSS

    How to change the scrollbar color using css [duplicate]

    How to create e-commerce website [closed]

    how to make html email look exactly the same as previewed just in browser?