Keep element with absolute positioning from moving while screen is resized

[05beckga]

Hi i am customizing a wordpress theme and on majority of my pages i’ve got a transparent layer behind the heading of the page. I would like to keep it in the same position on every viewport but just can’t seem to get it right.

my screen with the layer behind the header http://gbeckett.com/where-we-do-it/

Is there a way of keeping it in the same position?

[Erik_J]

@05beckga

I would like to keep it in the same position on every viewport

If I understand it correctly, you want to keep the right edge of the background layer in position relative the text in the heading. Even if the font-size and heading position can change and maybe also the title text.

To achieve this you could position the background layer in a spot that is the same in all cases, and form there move the layer based on font-size.

So, the position of the slanted right edge of the layer would meet the base-line where the title text starts, and the whole slanted bottom edge be moved below the title container’s bottom.

Then from that position you can use margins with the em unit to move the layer to a consistent point in the title text.

Because the heading-title has a position to base the layer’s coordinates on, no media rules should be needed.

E.g. in your rule-block:

.heading-title:before {
    content: ' ';
    width: 1200px;
    height: 700px;
    position: absolute;
    bottom: -200px;
    margin-bottom: 2em;
    left: -1200px;
    margin-left: 5em;
}

Mind, when the element has height/width, the top/left coordinates overrides their opposites.