Offset background behind html element / tag

Question

I want to set a CSS background behind any HTML element or tag and it should be a little offset.

Here is the result I'm looking for:

You can see the pointed red arrow to the slight background which is starting before the <h2> text and ends before the text ends. This background should expand with the amount of text in the element.

I have tried doing this with box shadow which you can see below:

body {
  padding: 20px;
}
h2 {
  display: inline-block;
  box-shadow: -10px 10px 0 red;
}

<h2>Ain't No Mountain</h2>

But as you can see the background is not appearing behind the text.

Let me know if anyone has done this kind of thing :)

Paulie_D · Accepted Answer · 2016-02-19T12:58:13.913

7

A pseudo-element is ideal here:

body {
  padding: 20px;
}
h2 {
  display: inline-block;
  position: relative;
}
h2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5px;
  left: -5px;
  background: rgba(255, 0, 0, 0.25);
  z-index: -1;
}

<h2>Ain't No Mountain</h2>

edited Feb 19 '16 at 12:58

answered Feb 19 '16 at 12:43

Paulie_D

107,962
13
142
161

Why did you use double colon in `h2::before`? – Omer Feb 19 '16 at 12:55
1

Because the double colon is the current method. - http://stackoverflow.com/questions/17684797/should-i-use-single-colons-or-double-colons-for-before-after-first-le – Paulie_D Feb 19 '16 at 12:57

razemauze · Answer 2 · 2016-02-19T13:12:56.560

4

Try this:

h2 {
    position:relative;
    z-index:1;
}
h2:after {
    content:"";
    position:absolute;
    width:80%;
    height:100%;
    background-color:rgba(0, 0, 0, .1);
    left:-10px;
    bottom:-10px;
    z-index:-1;
}

<h2>Ain't No Mountain</h2>

This will create a box that is behind the h2-element.

If I were you, I would add a class to the h2-element, so you can decide which elements that should have this effect.

edited Feb 19 '16 at 13:12

answered Feb 19 '16 at 12:42

razemauze

2,666
1
16
28

Will this also work when text will expand or I add more text to that element? – Omer Feb 19 '16 at 12:44
Yes, but I would change the height to 100% to match the height of the h2 text. Also h2:after requires z-index:-1; to properly appear behind the h2 element. See here: http://jsbin.com/boyixupalo/edit?html,css,output – Joey M-H Feb 19 '16 at 12:45
I have changed the height to 100%, in my answer, as Joseph said. The :after does not require z-index:-1;, as I have given the h2 z-index:2; – razemauze Feb 19 '16 at 12:47
You still need the z-index of -1, in your example the pseudo element is still in front of the h2. I copied and pasted here: https://jsfiddle.net/8qx7c5tn/ see more here: http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible – Joey M-H Feb 19 '16 at 12:53
Oh yea, I see that now. I have fixed it in the answer. – razemauze Feb 19 '16 at 13:13

score 3 · Answer 3 · answered Feb 19 '16 at 12:45

3

Maybe not cleanest solution but:

<div style="display: inline-block;background-color: red;">
    <span style="position: relative;top: -10px;left: 20px;">
         Ain't No Mountain
    </span>
</div>

obviously ussig css file , please ;D

answered Feb 19 '16 at 12:45

Cespejo

414
2
11

Offset background behind html element / tag

3 Answers3