Html Question posted in
Some basic documentation can be found here.

Html – How do I put a background image at the very top of the window?

I’m a beginner in html/css and I’m manipulating html pages already created by someone else at work.
I can’t get my background image to stick to the top of the window.
I’ve tried a few things with background, background-image, position and color but nothing works.
I’ve set ‘background-color: white;’ to try and solve my problem but in this case I’ve got another problem… The blue of the image used as a background doesn’t go all the way to the bottom and I end up with a white background that I don’t want.

With white background :

What it looks like with ‘background-color: #1f5a86;’:

My background-image :

Here are my css lines for the body :

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  background-image: url("https://i.sstatic.net/7oF46gQe.png");
  background-repeat: no-repeat;
  background-position: top;
  background-color: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Blabla</title>
  <link href="Style_blabla.css" rel="stylesheet" media="all" type="text/css">
  <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d = document;
      if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length,
          a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
          if (a[i].indexOf("#") != 0) {
            d.MM_p[j] = new Image;
            d.MM_p[j++].src = a[i];
          }
      }
    }
  </script>
  <link type="text/css" rel="stylesheet" href="file:///directory/Style_blabla.css">
  <link type="text/css" rel="stylesheet" href="file:///directory/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="SpryAssets/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="Liste_deroulante.css" title="Liste_deroulante">
</head>

<body>
  <div class="difusion" style="position: static; width: 220px;"><b>DIFUSION
        </b></div>
  <table class="tableauTitre" style="width: 1128px; height: 138px;" cellspacing="0" cellpadding="0" border="0">
    <tbody id="2" class="Tbleau_onglet">
      <tr>
        <td width="200"><br>
        </td>
        <td width="650"><a href="BlablaTheme.html"><strong></strong></a><strong><a

                name="haut"></a></strong>
          <a href="Blabla_Accueil.html"><img style="border: 0px solid ; width: 810px; height: 120px;" src="Titre_03.png"></a>
        </td>
      </tr>
    </tbody>
  </table>
  <nav>
    <ul>
      <li class="Deroulant"><a href="#">Accueil  </a>
        <ul class="sous">
          <li><a href="#">Thèmes</a></li>
          <li><a href="#">Domaines</a></li>
          <li><a href="#">Liste</a></li>
        </ul>
      </li>
      <li class="NonDeroulant"><a href="#">Institut  </a> </li>
      <li><a href="#">Catalogues</a></li>
      <li><a href="#" width:="130%">Diffusion</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">Glossaire</a></li>
    </ul>
  </nav>
</body>

</html>

Thank you for your help.

Tags:

2

Answers


  1. 0

    Review your code

    If I remove the excess content and focus only on the background image, to prevent stretching the image, I set it to be one screen wide and one screen high. After this adjustment, we still experience margin around the background: this is present on the original photo as a ‘transparent’ area.

    photo from transparent part

    body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  height: 200vh;
  background-image: url("https://i.sstatic.net/7oF46gQe.png"); /* The margin you see now is also present on the original image. Check it yourself by opening the image URL in a new tab. */
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  background-color: #205b87; /* Since we don't want to stretch the image, when it ends, we continue with the blue background. I would note that I would initially scale down the background image to include only the white part. */
}

    I didn’t remove the transparent parts in the review, but if you do that, the criticized ‘blue line’ will disappear.

    In the following example (use smaller photo), however, I have already removed these transparent parts.

    Use smaller background photo

    I wouldn’t include the blue part in the background, making the image unnecessarily larger. Let’s crop out only the white strip for the background image. This way, we reduce/optimize the image size. The remaining area can be filled with a color code.

    new bg

    body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  height: 200vh;
  background-image: url("https://i.sstatic.net/JfKr5n32.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  background-color: #205b87;
}

    Use SVG instead of photo

    Instead of the newly obtained background image, I would use an SVG. The advantage of SVG is that no matter how much you zoom in, it will always provide a sharp image. You need to implement the white part with SVG and then place it at the top of the page.

    Use HTML elements

    Since the distinctive feature of the background is only the protruding white semicircle, it’s intriguing to consider implementing this solely using HTML and CSS. There are two parts:

    1. a header with a white background color. In this, need a extra div formatted as a white circle with a positioned appropriately.
    2. content with a blue background color. (or just set background color to body instead of new div)
    * {
  --circle-width: 200px;
}

body {
  margin: 0;
  height: 200vh;
  background-color: #205b87;
}

.header {
  position: relative;
  background-color: white;
  height: 100px;
}

.circle {
  position: absolute;
  bottom: calc(var(--circle-width) / 7 * -1);
  left: 10%;
  width: var(--circle-width);
  height: calc(var(--circle-width) / 2);
  background-color: white;
  border-radius: 50%;
  
  /* Can write Logo Content to center of circle */
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%;
  z-index: -1; /* Background, behind the .circle. */
}

.header, .circle::before {
  box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.75);
}

/* So the content moves towards the div with the .circle class */
.content {
  position: absolute;
  inset: 0;
  z-index: 1;
}
    <div class="header">
  <div class="circle">
    Logo Content Here
  </div>
  <div class="content">
    Header Content Here
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    background-position: top left; 
background-size: cover;

    will do it if the image itself does not have transparent edges

    I suggest, if you want the white dip, just the image with the dip as background for the navigation and then use background color for the page and banner

    Here is the image without the border issues

    body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
  background-image: url("https://i.imgur.com/FZgHb2F.png");
  background-repeat: no-repeat;
  background-position: top left; 
  background-size: cover; /* Ensures the background image covers the entire element */
  background-color: red;
}
    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Blabla</title>
  <link href="Style_blabla.css" rel="stylesheet" media="all" type="text/css">
  <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d = document;
      if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length,
          a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
          if (a[i].indexOf("#") != 0) {
            d.MM_p[j] = new Image;
            d.MM_p[j++].src = a[i];
          }
      }
    }
  </script>
  <link type="text/css" rel="stylesheet" href="file:///directory/Style_blabla.css">
  <link type="text/css" rel="stylesheet" href="file:///directory/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="SpryAssets/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="Liste_deroulante.css" title="Liste_deroulante">
</head>

<body>
  <div class="difusion" style="position: static; width: 220px;"><b>DIFUSION
        </b></div>
  <table class="tableauTitre" style="width: 1128px; height: 138px;" cellspacing="0" cellpadding="0" border="0">
    <tbody id="2" class="Tbleau_onglet">
      <tr>
        <td width="200"><br>
        </td>
        <td width="650"><a href="BlablaTheme.html"><strong></strong></a><strong><a

                name="haut"></a></strong>
          <a href="Blabla_Accueil.html"><img style="border: 0px solid ; width: 810px; height: 120px;" src="Titre_03.png"></a>
        </td>
      </tr>
    </tbody>
  </table>
  <nav>
    <ul>
      <li class="Deroulant"><a href="#">Accueil  </a>
        <ul class="sous">
          <li><a href="#">Thèmes</a></li>
          <li><a href="#">Domaines</a></li>
          <li><a href="#">Liste</a></li>
        </ul>
      </li>
      <li class="NonDeroulant"><a href="#">Institut  </a> </li>
      <li><a href="#">Catalogues</a></li>
      <li><a href="#" width:="130%">Diffusion</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">Glossaire</a></li>
    </ul>
  </nav>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search