CODEWITHSUNDEEP
htmlcssbackground-imagepseudo-element
Francesca
Francesca

Reputation: 28148

Using :before and sprite background images

Trying to use :before on a span to add a background image off the edge of the main content.

Essentially should look like this:

enter image description here

I have the triangle as a bg image but can't seem to make it sit right, or show at all.

See JS Fiddle:

http://jsfiddle.net/Y6rMs/1/

Upvotes: 0

Views: 125

Answers (3)

trajce
trajce

Reputation: 1490

Here it is
jsfiddle.net/trajce/Y6rMs/27/

#bottomWide span.ribbon{
    position:relative;
    background-color:#C1C976;
    padding:5px 2%;
    float:right; 
}
#bottomWide span.ribbon:before{
    content:'';
    height:38px;
    width:25px;
    background-image:url(http://i.imgur.com/7nrYgTn.png);
    background-position:center left; <-
    background-repeat:no-repeat;
    position:absolute; 
    top:0;
    left:-30px; <- just play with this values a bit
    height:40px; <-
    width:30px; <-
}

Upvotes: 0

Jared
Jared

Reputation: 12524

You could do this without an image at all if you wanted to

http://jsfiddle.net/Y6rMs/26/

#bottomWide span.ribbon:before {
    content: "";
    width: 0; 
    height: 0; 
    position: absolute;
        top:0;
        left: -40px;
    border-top: 20px solid transparent; 
    border-right: 40px solid #0099ff; 
    border-bottom: 20px solid transparent;
}

Here is a list of some of the other shapes you can create with css http://css-tricks.com/examples/ShapesOfCSS/

Upvotes: 2

dezman
dezman

Reputation: 19368

I got it to show up here, I think you can get the rest... I added display: block; and removed your background-position rule.

Upvotes: 0

Related Questions