CODEWITHSUNDEEP
htmlcss
Ethan
Ethan

Reputation: 37

Background image not correctly sizing to screen

I am trying to use background-size: contain; to set my background img size, but it instead creates a bunch of small images of my background and tiles them across the screen. If I use some other sizing properties parts of the image get cut off. I've also tried background-size: 100% 100% to no avail.

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

  <title>The Bucker</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300&display=swap" rel="stylesheet"> 

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="/index.html">Home</a>
      <a href="/pricing.html">Pricing</a>
      <a href="/about.html">About</a>
      <a href="/contact.html">Contact</a>
    </div> 

<!-- page content in this div to push page content to the right  -->
    <div id="main">
      <body>
        <title>TheBucker</title>
        <a onclick="openNav()">
          <img id="icon" src="https://img.icons8.com/ios-filled/50/000000/menu.png" alt="menu_icon">
        </a>
        <!-- <img id="yank" src="https://cdn.glitch.com/83169c5c-c88c-4abb-a1a3-fbaea805258a%2Fcannabis%203_nobck.png?v=1586549582037" alt="if you're seeing this, just wait or reload the page"> -->

        <script>
        /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
          function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
          }

          /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
          function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
          } 
        </script>
      </body>
    </div>
</html>

Here is my style.css

body {
  font-family: helvetica, arial, sans-serif;
  margin: 0;
  background-image: url("https://cdn.glitch.com/83169c5c-c88c-4abb-a1a3-fbaea805258a%2Fbackground_no_text.jpg?v=1586547217919");
  background-size: contain;
}

Upvotes: 0

Views: 33

Answers (1)

Elman Huseynov
Elman Huseynov

Reputation: 1147

Try to use backgroud-size cover or 100%, remove background repeat and set background-position center like this:

body {
      font-family: helvetica, arial, sans-serif;
      margin: 0;
      background-image: url("https://cdn.glitch.com/83169c5c-c88c-4abb-a1a3-fbaea805258a%2Fbackground_no_text.jpg?v=1586547217919");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
<body>

   <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="/index.html">Home</a>
      <a href="/pricing.html">Pricing</a>
      <a href="/about.html">About</a>
      <a href="/contact.html">Contact</a>
    </div>

Upvotes: 2

Related Questions