Automatically use article title text as background

HTML & CSS
1

I’m not sure if this is possible, but what I want to do is:

Get the text from an article title and use that text in the background.

I currently have:

HTML

<body>
  <div class="wallpaper">
    <p class="bg-text">
      Last Night
    </p>
  </div>
    <div class="header">
      <h1>Last Night</h1>
    <div>
</body>

and the CSS:

.wallpaper {
  position:absolute;
  z-index: -10;
  background: white;
  display: block;
  min-height: 50%;
  min-width: 50%;
}

.bg-text {
  color: lightgrey;
  font-size: 120px;
  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
}

This displays the title as the background (rotated). But I am wondering instead of hard-coding it each time is whether I can ‘grab’ the text that is in the header tag automatically to display in the background.

2

If you could supply the text also in a data attribute then it would be available to css.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1:after {
	content:attr(data-duplicate);
	position:fixed;
	top:0;
	left:0;
	z-index: -10;
	min-height: 50vh;
	min-width: 50vw;
	color: lightgrey;
	font-size: 120px;
	transform: rotate(300deg);
}
</style>
</head>

<body>
<h1 data-duplicate="Last Night">Last Night</h1>
</body>
</html>

Alternatively you can wait for browsers to support css element() property which will take a picture of the element.

Only supported in moz at the moment though.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

body:before {
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index: -10;
	height: 100vh;
	width: 100vw;
	color: lightgrey;
	font-size: 120px;
	background: -moz-element(#ele) no-repeat center / contain; /* vendor prefixed */
	transform:rotate(-43deg) scale(2);
	transform-origin:0 0;
	opacity:0.5;
}
</style>
</head>
<body>
<h1 id="ele">Last Night</h1>
</body>
</html>

Otherwise JS :slight_smile:

2 Likes
3

I was thinking, with different text lengths the background text should be centred in the page and maybe the font-size should be limited by the viewport. Flexbox could be used to centre and vmin to restrict the size.

Added to your code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1:after {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100vw;
    height: 100vh;
    color: lightgrey;
    text-align: center;
    justify-content: center;
    align-items: center;
    transform: rotate(-60deg);
    font-size: 12vmin;
    content: attr(data-duplicate);
}
</style>
</head>
<body> 

<h1 data-duplicate="Last Week Tonight">Last Week Tonight</h1>

</body>
</html>
2 Likes
5

Thank you @Erik_J for your reply. This is exactly what I was after. And now gives me some new CSS to look into and mess around with. While I understand JS is another way around, being able to keep JS out of my site as much as possible is definitely a bonus.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.