0

i have a fixed image that when you scroll it doesnt move, but when you open the website at first i want the image to be fully visible, when i open the website on my phone only the top is visible, i want to recreate the same effect like this website and it still beeing visible on all divices,

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
   <nav> 
     <ul>
       <li><a href="/index.html">Home</a></li>
       <li><a href="/index.html">Store</a></li>
       <li><a href="/index.html">Store</a></li>
     </ul> 
   </nav>

    <div class="background">
     <h1>test</h1>
     <h2>test</h1>
    </div>

  </header> 





</body>
</html>

css

body {
   background-color:rgb(20, 20, 20);
   margin: 0;
   padding: 0;
   
}

nav li{
   width: 25%;
   display: inline-block; 
}

.background  {
   background: url('Images/night-1.webp') no-repeat center center fixed;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   text-align: center;
   align-items: center;
   font-size: 2rem;
   flex-shrink: 0;
   padding: 5rem;
   margin: auto;
   
}

h1 {
 color: aqua;

}

h2 {
   color: aqua;

}
itsLaserr
  • 1
  • You have to make your website [responsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) to all screen sizes. There are frameworks specifically designed for this purpose e.g. [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) – michael scarn Oct 10 '22 at 16:05
  • Possible duplicate of [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/q/6370690/13913033) – michael scarn Oct 10 '22 at 16:18

0 Answers0