How would I go about adding text behind a transparent image?

HTML & CSS
25

I would remove…

<div class="image7">

…it is superfluous to requirements.

I would change all instances of “px units” to “em units”.

Fixed units do not allow the “window” to change it’s
dimensions when changing the “font-size”. :wonky:

I would amend the CSS, where possible, to remove all
repetitions of code.

This is the result of those changes…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Through the round window</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#window {
  position: relative;
  width: 6.25em; /* do not use px units */
  height: 6.25em; /* do not use px units */
  padding: 0;
  margin: 1em auto;
  border-radius: 50%;
  background-image: url("https://i.imgur.com/ufAYxan.png"),url(http://i.imgur.com/4HJbzEq.png); 
  background-size: cover;
  font-family: 'courier new', monospace;
  /*changing the font size here changes the #window size */
  font-size: 1.5em;
  color: red;
  list-style: none;
}

#window::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://i.imgur.com/4HJbzEq.png);
  background-size: cover;
  content: '';
 }

#window li {
  position: absolute;
  transform: translate( -50%, -50%);
  font-weight: bold;
  color: #7afca0;
 }

#window li:nth-child(1) {
  top: 40%;
  left: 30%;
 }

#window li:nth-child(2) {
  top: 28%;
  left: 41%;
  color: #7ad6fc;
 }

#window li:nth-child(3) {
  top: 28%;
  left: 58%;
  color: #7ad6fc;
 }

#window li:nth-child(4) {
  top: 40%;
  left: 71.5%;
  color: #7ad6fc;
 }

#window li:nth-child(5) {
  top: 57.5%;
  left: 71.5%;
 }

#window li:nth-child(6) {
  top: 69%;
  left: 58%;
 }

#window li:nth-child(7) {
  top: 69%;
  left: 41%;
 }

#window li:nth-child(8) {
  top: 57.5%;
  left: 30%;
 }

#window li:nth-child(9) {
  top: 50%;
  left: 50%;
 }
</style>

</head>
<body>
 
 <ul id="window">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
 </ul>

</body>
</html>

Finally, I would change your “window image” to the one that I made earlier…

coothead

2 Likes