Responsive text over an image html-CodePudding

I added a line of text over an image, but when I change the screen size, the text change position, I want the Text to stay fixed on the screen even when I change screen size and make it responsive. I want to ask also if I want to insert a link button below the text what can I do to make it responsive to adapt all screen size and stay centered. Can you help me with that? Codes below. Thank you!!! -Alessandro

@font-face {
  src: url(fonts/Roboto/Roboto-Regular.ttf);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  src: url(/fonts/Roboto/Roboto-Bold.ttf);
}

body {
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
  padding: 15px;
  background-color: transparent;
  text-align: left;
  position: sticky;
  height: auto;
  top: 0;
}

.logo {
  text-decoration: none;
  color: black;
  font-size: 50px;
}

nav {
  background-color: rgb(219, 138, 31);
  position: sticky;
  top: 0;
  background-color: burlywood;
}

nav ul {
  list-style: none;
  /* Per togliere i puntini della lista */
  margin: 0;
  /* Toglie distanza laterale */
  padding: 0;
  /* Toglie distanza laterale */
}

nav li a {
  text-decoration: none;
  /* Toglie le decorazioni testo*/
  color: white;
}

nav li {
  display: inline-block;
  /* Li dispone orizzonatlamente */
  padding: 25px;
}

nav li:hover {
  background-color: gray;
}

.immaginehome {
  position: relative;
}

.immagine {
  width: 100%;
  height: auto;
  display: block;
}

.benvenuto {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  display: block;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-          scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Museo</title>
</head>

<body>

  <header>
    <!-- Header -->
    <a href="link" ><strong>Allo.</strong></a>

  </header>

  <nav>
    <!-- Barra Navigazione -->
    <ul>
      <li><a href="link">HOME</a></li>
      <li><a href="link">IL MUSEO</a></li>
      <li><a href="link">TICKET</a></li>
      <li><a href="link">INFO</a></li>
      <li><a href="link">DOVE SIAMO</a></li>
    </ul>
  </nav>

  <div id="immaginehome">
    <img src="immagini/image.jpg" alt="immaginemuseo" >
    <div >BENVENUTO</div>
  </div>


</body>

</html>

CodePudding user response：

First off, you have to close your div with the id immaginehome. Then remove your absolute positioning on benvenuto and make the position relative. Then add width: 100%; to that div containing the text, and add text-align: center; to center align it. I used a dummy image to demonstrate.

@font-face {
src: url(fonts/Roboto/Roboto-Regular.ttf);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
src: url(/fonts/Roboto/Roboto-Bold.ttf);
}

body{
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',  Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header{
padding: 15px;
background-color:transparent;
text-align: left;
position: sticky;
height: auto;
top: 0;
}

.logo{
text-decoration: none;
color:black;
font-size: 50px;


}

nav{
background-color: rgb(219, 138, 31);
position: sticky;
top: 0;
background-color: burlywood;
}
nav ul{
list-style: none; /* Per togliere i puntini della lista */
margin: 0; /* Toglie distanza laterale */
padding: 0; /* Toglie distanza laterale */
}

nav li a{
text-decoration: none; /* Toglie le decorazioni testo*/ 
color: white;
}

nav li{
display: inline-block; /* Li dispone orizzonatlamente */
padding: 25px;
}

nav li:hover{
background-color: gray;
}

.immaginehome{
position: relative;
}

.immagine{
width: 100%;
height: auto;
display: block;
}

.benvenuto{
  position: relative;
  width: 100%;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-          scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Museo</title>
</head>
<body>

<header> <!-- Header -->
    <a href="link" ><strong>Allo.</strong></a>

</header>

<nav> <!-- Barra Navigazione -->
    <ul>
        <li><a href="link">HOME</a></li>
        <li><a href="link">IL MUSEO</a></li>
        <li><a href="link">TICKET</a></li>
        <li><a href="link">INFO</a></li>
        <li><a href="link">DOVE SIAMO</a></li>
    </ul>
</nav>

<div id="immaginehome">
<img src="https://dummyimage.com/1200x500/000/fff" alt="immaginemuseo" >
<div >BENVENUTO</div>
</div>


</body>
</html>

EDIT: OP updated the code.

CodePudding user response：

Looking for something like this? You need a container to overlay the items. Add the image on top, then you add the text. Now simply position the text element with top/right/bottom/left and remove inset.

/* CSS */
.container {
  position: relative; /* this is important! */
  width: 400px;
  height: 300px;
}

.image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* do your stuff to position it as needed */
}

<!-- HTML -->
<div >
   <img  src="https://picsum.photos/500" alt="">
   <h2 class=title>Title</h2>
</div>