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) ". ";
}
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>