1

enter image description hereSo I have two svg images and one is positioned left, and one is positioned right. They both have a height of 100% and a width of 50%. The images are not scaling to fit the container and I have tried everything. I've tried to fiddle with the viewbox but can't quite get it. The preserveAspectRatio almost gets it with none but it squashes the images when you resize the browser. Slice almost gets it but one picture overlaps the other. I have tried everything but is coming up empty. Does anyone have any suggestion? I'm trying to get rid of the white space and have the picture cover the background but css background: cover does not work.

Here's my code:

header {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    // background: black;

    .airplane {
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }

    .wings {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;

        // background-image: linear-gradient(rgba(black, 0.))
    }

    .airplaneleft {
        position: absolute;
        top: 0;
        right: 0;
        // background: red;
        animation: left 2s forwards;
    }

    .airplaneright {
        position: absolute;
        top: 0;
        left: 0;
        // background: black;
        animation: right 2s forwards;
    }



HTML

<header>
        <div class="menu">
            <input type="checkbox" class="toggler">
            <span></span>
        </div>
        <nav class="navbar">
            <ul class="links">
                <li class="link"><a href="#">Home</a></li>
                <li class="link"><a href="#">About</a></li>
                <li class="link"><a href="#">Aviation</a></li>
                <li class="link"><a href="#">Contact</a></li>
                <li class="link"><a href="#">Projects</a></li>
            </ul>
        </nav>
        <div class="intro">
            <h1 class="name"><span class="first">Jovan </span class="last"><span>Elmore</span></h1>
            <h2 class="title">Aviation Specalist</h2>
        </div>
        <div class="airplane">
            <img class="airplaneleft wings" src="\imgs\FfRZvZFh01.svg" alt="left side of airplane">
            <img class="airplaneright wings" src="\imgs\VRjCKGg201.svg" alt="right side of airplane">
        </div>
    </header>
Improve this question
8
  • Can you bring an image what result do you need to reach? Or a live example of your current code?
    – focus.style
    Commented May 23, 2020 at 19:42
  • @focus.style I have the image. I'm trying to get into to cover the background but css background:cover isn't working.
    – Alanaj
    Commented May 23, 2020 at 19:51
  • I see a lot of background properties and non backbround-image. Are you using only 2 this images? Ore there are some more? Can you upload all images somewhere and drop a link here, so i could test you code?
    – focus.style
    Commented May 23, 2020 at 19:57
  • @focus.style I think I might have found a problem. When I use the svg inline the width and the height property works. When I don't they don't have any affect if they are in a different folder. Here are the pictures. codepen.io/jalissaw/pen/gOaEvXg
    – Alanaj
    Commented May 23, 2020 at 20:13
  • @focus.style Yeah, I'm only using two images.
    – Alanaj
    Commented May 23, 2020 at 20:19

1 Answer 1

Reset to default
1

This will center the wings vertically and set them in line.

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>

    <style>
    header {
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }

      .airplane {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
      }

      .wings {
        position: a
          width: 50%;
          height: auto;
          top: 50%;
          transform: translateY(-50%);
          position: absolute;
      }

      .airplaneleft {
          left: 0;
          animation: left 2s forwards;
      }

      .airplaneright {
          right: 0;
          animation: right 2s forwards;
      }



    </style>

</head>
<body>

  <header>
          <div class="menu">
              <input type="checkbox" class="toggler">
              <span></span>
          </div>
          <nav class="navbar">
              <ul class="links">
                  <li class="link"><a href="#">Home</a></li>
                  <li class="link"><a href="#">About</a></li>
                  <li class="link"><a href="#">Aviation</a></li>
                  <li class="link"><a href="#">Contact</a></li>
                  <li class="link"><a href="#">Projects</a></li>
              </ul>
          </nav>
          <div class="intro">
              <h1 class="name"><span class="first">Jovan </span class="last"><span>Elmore</span></h1>
              <h2 class="title">Aviation Specalist</h2>
          </div>
          <div class="airplane">
              <img class="airplaneleft wings" src="2.svg" alt="left side of airplane">
              <img class="airplaneright wings" src="1.svg" alt="right side of airplane">
          </div>
      </header>

</body>
</html>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.