Offset Background Image

Hello,
I’m stuck with this one -
I am just trying to style my quote rotator.

It has a background colour, then I have an apostrophe image I want to overlap the top left corner. I can’t figure out how to do this without the apostrophe image being cropped by the div.

Is there a way to ‘float’ it over the top so the whole image is seen?

I have tried this css:

.quotescollection_randomquote {
	margin-left: 2em;
	text-align: right;
	/*background: rgba(0,97,123,0.6); darkblue */
	background: @aqua url(../images/apostrophe.png) no-repeat -10px -10px;
	.rounded(10px);
	padding: 2em 1em;
	color: @White;
	font-weight: 300;
}

Thanks!

If you want it to hang out of the box, place the image in the box and give it position: absolute; and then position it where you want. Make sure to give the container position: relative, too.

Thanks Ralph. I really wanted to keep it as a background image, because I’m working with a plugin and didn’t want to hack into its code with an inline image.

But I found a workaround using CSS and your idea to position absolutely:

.quotescollection_randomquote {
	margin-left: 0em;
	text-align: right;
	background:  rgba(0,194,203,0.6); /*aqua with opacity*/
	.rounded(10px);
	padding: 2em 1em;
	color: @White;
	font-weight: 300;
	position: relative;

		&:before { /*floats the apostrophe over the div*/
			content: "\\2018";
			font-family: Coustard;
			color: @aqua;
			font-size: 1300%;
			line-height: 0;
			position:absolute;
			top: 60px;
			left: -10px;
			}
}

This way also I get rid of the image altogether and just use a font.

Ah yes, I should have thought of using :before or :after. You could actually do that with a background image, too.