treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Pseudo background-crop with Compass sprite

  • qhoc
    Permalink to comment #

    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?

  • TheDoc
    Permalink to comment #

    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 200x50, so I'm not sure what you thought was going to happen.

  • qhoc
    Permalink to comment #

    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?

Add a Comment