How do I add text to the background?-CodePudding

How can you get the text in the background? I would like the title (and other additional text to be in the background) Here is the html code:

This is how it looks at the moment, screenshot of not the whole screen, photo resolution 5498x3615

enter image description here

#title {
  text-align: center;
  font-family: Playbill;
  font-weight: normal;
  font-size: 40px;
}

.bg_image {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  height: auto;
}

<body>
  <h1 id="title">Путеводитель по городам</h1>
  <img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
</body>

CodePudding user response：

You can set background-image and just put the text on top. Like this:

#title {
  text-align: center;
  font-family: Playbill;
  font-weight: normal;
  font-size: 40px;
}

body {
 background-image: url(https://via.placeholder.com/1200x600);
 background-size: cover; /* Size The Image */
 background-position: center; /* Center The Image */
 background-repeat: no-repeat;
}

<body>
  <h1 id="title">Путеводитель по городам</h1>
</body>

CodePudding user response：

I've got this responsive solution:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    position: relative;
}

#title {
    text-align: center;
    font-family: Playbill;
    font-weight: normal;
    font-size: 40px;
    position: absolute;
    z-index: 1;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  
.bg_image {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    height: auto;
    display:block;
    margin: 0 auto;
    max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="stylesheet" href="style.css" type="text/css" />
   </head>
   <body>
      <div class="container">
         <h1 id="title">Путеводитель по городам</h1>
         <img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site">
      </div>
   </body>
</html>