Grow your CSS skills. Land your dream job.

Pseudo background-crop with Compass sprite

  • # October 5, 2012 at 8:00 pm

    I am trying to figure out how to implement background crop like this in Compass sprite:
    http://nicolasgallagher.com/css-background-image-hacks/

    http://jsfiddle.net/blineberry/BhbrL/

    This is what I have in .sass file:

    @import “buttons/*.png”
    @include all-buttons-sprites

    .buttons-arrow
    background-image: none
    width: 30px
    height: 45px

    .buttons-arrow:before
    +buttons-sprites(arrow)
    display: block
    content: “”
    width: 15px
    height: 27px

    As you see, I tried to make .buttons-arrow without the background image first and then I added back the background-image. However, it gave me this .css file:

    .buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
    background: url(‘../images/buttons-s5ae2b3a1e9.png’) no-repeat;
    }

    .buttons-arrow {
    background-position: 0 0;
    }

    .buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
    background-position: 0 -27px;
    }

    .buttons-arrow {
    background-image: none;
    width: 30px;
    height: 45px;
    margin-left: 150px;
    }

    .buttons-arrow:before {
    display: block;
    content: “”;
    width: 15px;
    height: 27px;
    }

    .buttons-arrow:before .buttons-arrow {
    background-position: 0 0;
    }

    .buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
    background-position: 0 -27px;
    }

    .buttons-arrow:hover {
    background-color: #ea4800;
    }

    Obviously it was wrong because it combined into this `.buttons-arrow:before .buttons-arrow`

    I just want a simple result like this

    .buttons-arrow {
    width: 30px;
    height: 45px;
    margin-left: 150px;
    }

    .buttons-arrow:before {
    background-image: url(‘../images/buttons-s5ae2b3a1e9.png’);
    display: block;
    content: “”;
    height: 27px;
    width: 15px;

    **How do I code this in Compass using sprite?**

    # October 5, 2012 at 9:08 pm

    I’m not really sure what you want. In your JSfiddle everything is working as it should.

    You’ve written: “Image is 500px by 500px, but only 200px by 50px is showing.”

    But you’ve set the pseudo element to be exactly 200×50, so I’m not sure what you thought was going to happen.

    # October 5, 2012 at 10:46 pm

    The link above was example from someone else.

    OK, this is what I want to happen from the Compass sprite method
    http://jsfiddle.net/qhoc/vEvSJ/

    But this is what I got (which is blank):
    http://jsfiddle.net/qhoc/Ac5rG/

    I know how this works in css but how to do this in Sass / Compass syntax?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".