h1背景色不会拉伸到图像宽度

Question

Here is my HTML & CSS respectively:

HTML

<section class="slider">
  <div class="row">
    <div class="large-12 column">
      <div style="position:relative">
        <img src="img/code.jpg" alt="Code Image">
        <h1><span>slider title</span></h1>
      </div>
    </div>
  </div>
</section>

CSS

 h1 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}

h1 span {
  width: 100%;
  color: white;
  font-size: 1rem;
  letter-spacing: 2px;
  background-color: rgba(30, 59, 69, 0.8);
}

And here is a screenshot via Imgur, of what my page looks like currently:

I'm trying to set the blue strip behind "slider title" to stretch across the entire width of the image beind. Am I missing something at all? I've tried a few different methods but nothing appears to work :(

Answer 1

Spans are by default inline elements, you can either add 'display:block' to the h1 span or make it a div which is by default a block element.

I would also probably modify the code to make things easier down the road when you want to use an h1 tag someplace else.

HTML:

<section class="slider">
  <div class="row">
    <div class="large-12 column">
      <div style="position:relative">
        <img src="img/code.jpg" alt="Code Image">
        <h1 class='slide-title'>slider title</h1>
      </div>
    </div>
  </div>
</section>

CSS:

.slide-title {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  color: white;
  font-size: 1rem;
  letter-spacing: 2px;
  background-color: rgba(30, 59, 69, 0.8);
}