How can I center a CSS background image as if the image had a different width (without cutting the bgimg off)?
Posted
by
henrymb67
on Stack Overflow
See other posts from Stack Overflow
or by henrymb67
Published on 2012-06-18T03:03:42Z
Indexed on
2012/06/18
3:16 UTC
Read the original article
Hit count: 111
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(:
© Stack Overflow or respective owner
