How to watermark a counter-increment element behind each paragraph
?

Question

Is it possible, within the attached fiddle, to make the counter-increment element a watermark behind each set of <p> paragraphs centred and also to have an option in CSS to adjust the transparent amount displayed of the counter-increment element ?

Attached is the Fiddle

If an updated Fiddle could please be provided, would be extremely appreciated, as I am still new to coding.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
tempus, pharetra a est.</p><br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
tempus, pharetra a est.</p>

CSS:

body {
counter-reset: section;
}

p:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

seems awfully similar to your previous question - https://stackoverflow.com/questions/33684549/how-to-place-a-css-counter-increment-below-a-paragraph-of-text - it's not like you don't know how to do any of it — Jaromanda X, Nov 16 '15 at 03:03
@Jaromanda X, I just noticed that too. How about it Dave? By looking at your other questions you may be in need of a HTML/CSS tutorial or two. A bit early to digg into Bootstrap and jQuery when you're new to coding. — Rene van der Lende, Nov 16 '15 at 03:23

Rene van der Lende · Accepted Answer · 2015-11-16T03:18:47.303

If I got you correctly, I'd say, yep, you can. In my Fiddle I added p { position: relative } which is needed to position an absolute (either :before or :after) child over or under it.

In this case under the paragraph.

Make the child (p:before) as tall as the parent by setting top, left, bottom and right to : 0 and give the child a z-index value which is lower than its parent. As in this case <p> has no z-index a z-index: -1 for the child will do fine.

The rest of the styling is up to you, I just gave you an idea...

body {
    counter-reset: section;
}
p {
    position: relative
}
p:before {
    counter-increment: section;
    content: "Section " counter(section) ". ";

    z-index: -1;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    font-size: 100px; color: rgba(0,0,0,0.1); font-weight: bold;
    text-align: center
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
    vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
    Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
    volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
    euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
    consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
    nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
    condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
    quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
    tempus, pharetra a est.</p><br>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim
    vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet.
    Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas
    volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc
    euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec
    consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel
    nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at
    condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec
    quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat
    tempus, pharetra a est.</p>

score 0 · Answer 2 · answered Nov 16 '15 at 03:08

This should get you going

body {
    counter-reset: section;
}

This is important so that the position of the section can be absolute with respect to the paragraph

p {
    position:relative;
}

and now the watermark

p:before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
    position:absolute;
    left:50%;
    top: 50%;
    font-size:50px;
    margin-top:-25px;
    margin-left:-3em;
    font-weight:bold;
    opacity:0.3;
    z-index:-1;   
}

You may need to play with the margins to get it like you want

How to watermark a counter-increment element behind each paragraph ?

2 Answers2

How to watermark a counter-increment element behind each paragraph
?