SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code 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: [MENTION=249826]White[/MENTION];
    	font-weight: 300;
    }

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code CSS:
    .quotescollection_randomquote {
    	margin-left: 0em;
    	text-align: right;
    	background:  rgba(0,194,203,0.6); /*aqua with opacity*/
    	.rounded(10px);
    	padding: 2em 1em;
    	color: [MENTION=249826]White[/MENTION];
    	font-weight: 300;
    	position: relative;
     
    		&:before { /*floats the apostrophe over the div*/
    			content: "\2018";
    			font-family: Coustard;
    			color: [MENTION=29346]aqua[/MENTION];
    			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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah yes, I should have thought of using :before or :after. You could actually do that with a background image, too.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •