Background-position anomolies

Question

This CSS positions a sprite so that the top-left of the sprite appears at the 50% centre position;

.al-for-you h2::after, .taster-cta h2::after {
    background: url("images/kick-30.png") no-repeat scroll 50% -32px;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    top: 100%;
    width: 100%;
}

changing to this;

background: url("images/kick-30.png") no-repeat scroll 50% 0;

positions the (other) sprite correctly, ie it's centred within it's container. but this;

background: url("images/kick-30.png") no-repeat scroll 50% 100%;

has the same offset as the first example.

It it simply the case I can't centre sprites with background percentages and will have to use separate images? Or am I missing something?

Firebug is no help here - I thought changing scroll to fixed would be the answer but the background simply disappears with no clue as to where it's gone.

Can be seen on the page http://development.actionlearningassociates.co.uk/action-learning-2

Answer 1

The problem for the misalignment in case of the h2::after element (but not the anchor) is because of from where the h2::after element starts. It starts at an offset of 10px because of the padding set on its parent. Because of this offset the image looks as though it is not in center even though it actually is. I have added a red border in the below snippet for you to visually see it.

.al-for-you {
  background: #bbccba none repeat scroll 0 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.al-for-you h2 {
  background: #11696a none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 32px;
  margin-bottom: 30px !important;
  padding: 9px 10px !important;
  position: relative;
}
.al-for-you h2::after {
  background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
  content: " ";
  display: block;
  height: 30px;
  position: absolute;
  top: 100%;
  width: 100%;
  border: 1px solid red;
}
.al-for-you .cta {
  background: #106a6a url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% 0;
  color: #fff;
  display: block;
  padding: 40px 20px;
  text-align: center;
  border: 1px solid red;
}

<div class="al-for-you">
  <div class="thumbnail-container">
    <h2>Is action learning for you?</h2>
    <p>
      <p>If you’re ready for change, if you feel stuck right now, or are perhaps facing resistance within your organisation, Action Learning will help.</p>
      <p>You will be able to share your experiences with a small group of peers in our Action Learning Sets, and take away actions you can implement straight away.</p>
      <a class="cta" href="/contact"> Get in touch... </a>
  </div>

---

There are three ways to fix this issue and they are as follows:

• By removing padding on the parent. But I don't think this is a good option for you because it would affect positioning of the text etc.

• Or alternately, you can set the width of the h2::after element to 100% - 20px (20px because of a 10px padding on either side). This can be done using calc feature like in the below snippet.

  .al-for-you h2::after {
    background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    top: 100%;
    width: calc(100% - 20px); /* modified width setting */
  }

  .al-for-you {
    background: #bbccba none repeat scroll 0 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .al-for-you h2 {
    background: #11696a none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-size: 32px;
    margin-bottom: 30px !important;
    padding: 9px 10px !important;
    position: relative;
  }
  .al-for-you h2::after {
    background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    top: 100%;
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
  }
  .al-for-you .cta {
    background: #106a6a url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% 0;
    color: #fff;
    display: block;
    padding: 40px 20px;
    text-align: center;
  }

  <div class="al-for-you">
    <div class="thumbnail-container">
      <h2>Is action learning for you?</h2>
      <p>
        <p>If you’re ready for change, if you feel stuck right now, or are perhaps facing resistance within your organisation, Action Learning will help.</p>
        <p>You will be able to share your experiences with a small group of peers in our Action Learning Sets, and take away actions you can implement straight away.</p>
        <a class="cta" href="/contact"> Get in touch... </a>
    </div>

• Or, since you are already using absolute positioning for the h2::after element you could just set the left position as 0px and leave the width as 100% like in the below snippet.

  .al-for-you h2::after {
    background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    left: 0px; /* add this */
    top: 100%;
    width: 100%;
  }

  .al-for-you {
    background: #bbccba none repeat scroll 0 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .al-for-you h2 {
    background: #11696a none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-size: 32px;
    margin-bottom: 30px !important;
    padding: 9px 10px !important;
    position: relative;
  }
  .al-for-you h2::after {
    background: rgba(0, 0, 0, 0) url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% -32px;
    content: " ";
    display: block;
    height: 30px;
    position: absolute;
    left: 0px;
    top: 100%;
    width: 100%;
  }
  .al-for-you .cta {
    background: #106a6a url("http://development.actionlearningassociates.co.uk/wordpress/wp-content/themes/ala/images/kick-30.png") no-repeat scroll 50% 0;
    color: #fff;
    display: block;
    padding: 40px 20px;
    text-align: center;
  }

  <div class="al-for-you">
    <div class="thumbnail-container">
      <h2>Is action learning for you?</h2>
      <p>
        <p>If you’re ready for change, if you feel stuck right now, or are perhaps facing resistance within your organisation, Action Learning will help.</p>
        <p>You will be able to share your experiences with a small group of peers in our Action Learning Sets, and take away actions you can implement straight away.</p>
        <a class="cta" href="/contact"> Get in touch... </a>
    </div>