/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Horizontal Background</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  /* Fixed horizontal background */
  body {
    background-image: url('fondo3.jpg'); /* your image */
    background-repeat: no-repeat;
    background-position: center top; /* center horizontally, start from top */
    background-size: 100% auto; /* fills width, keeps height proportional */
    background-attachment: fixed; /* stays in place while scrolling */
    background-color: #000; /* fallback for edges */
    color: white;
    font-family: "Times New Roman", serif;
  }

  .content {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 20px;
  }

  h1 {
    margin-top: 40vh;
    text-align: center;
    color: #ffeec9;
  }

  p {
    line-height: 1.6;
    color: #fce9b8;
  }
  
 
  
</style>
</head>
<body>
  <div class="content">
    <h1>Fixed Horizontal Background</h1>
    <p>Your horizontal image fills the width of the screen and stays perfectly still while you scroll.</p>
    <p>Scroll down — the content moves, but the background doesn’t. No stretching, no white gaps.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat efficitur justo, non ultrices neque tempor quis.</p>
    <p>Donec ac libero urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Keep scrolling... the image stays fixed, full-width, and crisp.</p>
  </div>
  
  
</body>
</html>

