Home > Software engineering >  How to position image as desired
How to position image as desired

Time：12-28

:root {
  --clr-primary: #0F052F;
  --clr-secondary: #43D9B8;
  --clr-light: #EEEEEE;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

.wrapper {
  width: 1440px;
  margin: 0 auto;
  padding: 0 100px;
}


/* Header - Navigation */

.desktop-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1240px;
  position: fixed;
  z-index: 200;
  top: 44px;
  padding-right: 0;
}

.desktop-nav .menu-items {
  display: flex;
  list-style: none;
}

.desktop-nav .menu-items li {
  margin: 0 27.5px;
}

.desktop-nav .menu-items li:nth-last-of-type(1) {
  margin-right: 0;
}

.desktop-nav .menu-items li a {
  text-decoration: none;
  color: var(--clr-primary);
  font-size: 16px;
  font-weight: var(--fw-medium);
  position: relative;
}

.desktop-nav .menu-items li a.active::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: var(--clr-secondary);
  left: 0;
  bottom: -2px;
}

.desktop-nav .menu-items li a.btn {
  color: white;
  background-color: var(--clr-primary);
  border-radius: 10px;
  padding: 10px 23px;
}


/* BIA section */

.bia-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bia-container .left h1 {
  font-size: 80px;
  font-weight: var(--fw-bold);
  margin: 60px 627px 18px 105px;
  color: white;
  line-height: 96px;
}

.bia-container .left p {
  font-size: 18px;
  font-weight: var(--fw-regular);
  margin: 0px 632px 57px 105px;
  color: white;
}

.bia-container .left a.btn {
  text-decoration: none;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 10px 23px;
  border: 1px solid #43D9B8;
  margin: 0 0px 108px 105px;
  color: white;
}

.bia-container .right {
  padding-right: 105px;
}


/* Background header */

.bia-container .background {
  position: absolute;
  background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
  border-radius: 50px 50px 300px 50px;
  width: 1240px;
  height: 585px;
}


/* .bia-bg {
    position: absolute;
    z-index: -1;
} */

.bia-container .background .right {
  position: absolute;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div >
    <nav >
      <div >
        <a href="#">
          <img src="Images/bia-logo.svg" alt="">
      </div>

      <ul >
        <li>
          <a href="#" >Home</a>
        </li>

        <li>
          <a href="#">Services</a>
        </li>

        <li>
          <a href="#">Contact</a>
        </li>

        <li>
          <a href="#" >Neem contact op</a>
        </li>
      </ul>
    </nav>

    <!-- End of desktop navigation -->

    <header >
      <div >
        <div >
          <h1>Make data work for you</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
          <a href="#" >Neem contact op</a>
        </div>

        <div >
          <img src="Images/header-analytics.svg" alt="">
        </div>
      </div>

      <!-- <img  src="Images/header-background.svg" alt=""> -->


      <!-- End of header section -->
    </header>
  </div>

  <script src="main.js"></script>
</body>

</html>

How can I position the image 'Images/header-analytics.svg' as desired in this image? Desired positioning

Right now, it is positioned as follows: Current positioning

Any help would be greatly appreciated! I have tried changing the place where the image is in the HTML part, but that does not seem to do the trick. I have also tried to play with the margins for the image, however that does also not seem to work for me.

My apologies if this is a dumb question, I'm quite new to web development.

CodePudding user response：

With your current HTML and CSS structure. I would suggest just adding top and right values for your position: absolute; on .bia-container .background .right CSS. For this example I used top: 150px; right 150px; Also, for demonstration purposes, I replaced your Image with a dummy image. Obviously with your image, you will need to adjust the top and right values as necessary.

:root {
  --clr-primary: #0F052F;
  --clr-secondary: #43D9B8;
  --clr-light: #EEEEEE;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
}

.wrapper {
  width: 1440px;
  margin: 0 auto;
  padding: 0 100px;
}


/* Header - Navigation */

.desktop-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1240px;
  position: fixed;
  z-index: 200;
  top: 44px;
  padding-right: 0;
}

.desktop-nav .menu-items {
  display: flex;
  list-style: none;
}

.desktop-nav .menu-items li {
  margin: 0 27.5px;
}

.desktop-nav .menu-items li:nth-last-of-type(1) {
  margin-right: 0;
}

.desktop-nav .menu-items li a {
  text-decoration: none;
  color: var(--clr-primary);
  font-size: 16px;
  font-weight: var(--fw-medium);
  position: relative;
}

.desktop-nav .menu-items li a.active::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: var(--clr-secondary);
  left: 0;
  bottom: -2px;
}

.desktop-nav .menu-items li a.btn {
  color: white;
  background-color: var(--clr-primary);
  border-radius: 10px;
  padding: 10px 23px;
}


/* BIA section */

.bia-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bia-container .left h1 {
  font-size: 80px;
  font-weight: var(--fw-bold);
  margin: 60px 627px 18px 105px;
  color: white;
  line-height: 96px;
}

.bia-container .left p {
  font-size: 18px;
  font-weight: var(--fw-regular);
  margin: 0px 632px 57px 105px;
  color: white;
}

.bia-container .left a.btn {
  text-decoration: none;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 10px 23px;
  border: 1px solid #43D9B8;
  margin: 0 0px 108px 105px;
  color: white;
}

.bia-container .right {
  padding-right: 105px;
}


/* Background header */

.bia-container .background {
  position: absolute;
  background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
  border-radius: 50px 50px 300px 50px;
  width: 1240px;
  height: 585px;
}


/* .bia-bg {
    position: absolute;
    z-index: -1;
} */

.bia-container .background .right {
    position: absolute;
    top: 150px;
    right: 150px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div >
    <nav >
      <div >
        <a href="#">
          <img src="Images/bia-logo.svg" alt="">
      </div>

      <ul >
        <li>
          <a href="#" >Home</a>
        </li>

        <li>
          <a href="#">Services</a>
        </li>

        <li>
          <a href="#">Contact</a>
        </li>

        <li>
          <a href="#" >Neem contact op</a>
        </li>
      </ul>
    </nav>

    <!-- End of desktop navigation -->

    <header >
      <div >
        <div >
          <h1>Make data work for you</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
          <a href="#" >Neem contact op</a>
        </div>

        <div >
          <img src="https://dummyimage.com/200/000000/f2009d&text=SVG" alt="">
        </div>
      </div>

      <!-- <img  src="Images/header-background.svg" alt=""> -->


      <!-- End of header section -->
    </header>
  </div>

  <script src="main.js"></script>
</body>

</html>

Click full-page

CodePudding user response：

use position:absolute; and give top and right values to fix the in desired location.

:root {
    --clr-primary: #0F052F;
    --clr-secondary: #43D9B8;
    --clr-light: #EEEEEE;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
  }
  
  * {
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
  }
  
  .wrapper {
    width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
  }
  
  
  /* Header - Navigation */
  
  .desktop-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1240px;
    position: fixed;
    z-index: 200;
    top: 44px;
    padding-right: 0;
  }
  
  .desktop-nav .menu-items {
    display: flex;
    list-style: none;
  }
  
  .desktop-nav .menu-items li {
    margin: 0 27.5px;
  }
  
  .desktop-nav .menu-items li:nth-last-of-type(1) {
    margin-right: 0;
  }
  
  .desktop-nav .menu-items li a {
    text-decoration: none;
    color: var(--clr-primary);
    font-size: 16px;
    font-weight: var(--fw-medium);
    position: relative;
  }
  
  .desktop-nav .menu-items li a.active::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--clr-secondary);
    left: 0;
    bottom: -2px;
  }
  
  .desktop-nav .menu-items li a.btn {
    color: white;
    background-color: var(--clr-primary);
    border-radius: 10px;
    padding: 10px 23px;
  }
  
  
  /* BIA section */
  
  .bia-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .bia-container .left h1 {
    font-size: 80px;
    font-weight: var(--fw-bold);
    margin: 60px 627px 18px 105px;
    color: white;
    line-height: 96px;
  }
  
  .bia-container .left p {
    font-size: 18px;
    font-weight: var(--fw-regular);
    margin: 0px 632px 57px 105px;
    color: white;
  }
  
  .bia-container .left a.btn {
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 10px;
    padding: 10px 23px;
    border: 1px solid #43D9B8;
    margin: 0 0px 108px 105px;
    color: white;
  }
  
  .bia-container .right {
    padding-right: 105px;
  }
  
  
  /* Background header */
  
  .bia-container .background {
    position: absolute;
    background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
    border-radius: 50px 50px 300px 50px;
    width: 1240px;
    height: 585px;
  }
  
  
  /* .bia-bg {
      position: absolute;
      z-index: -1;
  } */
  
  .bia-container .background .right {
    position: absolute;
  }
  #right-pic{
      width:200px;
      height:200px;
      position:absolute;
      right:100px;
      top:40%;
  }
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div >
    <nav >
      <div >
        <a href="#">
          <img src="Images/bia-logo.svg" alt="">
      </div>

      <ul >
        <li>
          <a href="#" >Home</a>
        </li>

        <li>
          <a href="#">Services</a>
        </li>

        <li>
          <a href="#">Contact</a>
        </li>

        <li>
          <a href="#" >Neem contact op</a>
        </li>
      </ul>
    </nav>

    <!-- End of desktop navigation -->

    <header >
      <div >
        <div >
          <h1>Make data work for you</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
          <a href="#" >Neem contact op</a>
        </div>

          <img src="./NewTux.svg" alt="" id="right-pic">
      </div>

      <!-- <img  src="Images/header-background.svg" alt=""> -->


      <!-- End of header section -->
    </header>
  </div>

  <script src="main.js"></script>
</body>

</html>

CodePudding user response：

Try using position:absolute; and also add your own svg pic.

:root {
    --clr-primary: #0F052F;
    --clr-secondary: #43D9B8;
    --clr-light: #EEEEEE;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
  }
  
  * {
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
  }
  
  .wrapper {
    width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
  }
  
  
  /* Header - Navigation */
  
  .desktop-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1240px;
    position: fixed;
    z-index: 200;
    top: 44px;
    padding-right: 0;
  }
  
  .desktop-nav .menu-items {
    display: flex;
    list-style: none;
  }
  
  .desktop-nav .menu-items li {
    margin: 0 27.5px;
  }
  
  .desktop-nav .menu-items li:nth-last-of-type(1) {
    margin-right: 0;
  }
  
  .desktop-nav .menu-items li a {
    text-decoration: none;
    color: var(--clr-primary);
    font-size: 16px;
    font-weight: var(--fw-medium);
    position: relative;
  }
  
  .desktop-nav .menu-items li a.active::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--clr-secondary);
    left: 0;
    bottom: -2px;
  }
  
  .desktop-nav .menu-items li a.btn {
    color: white;
    background-color: var(--clr-primary);
    border-radius: 10px;
    padding: 10px 23px;
  }
  
  
  /* BIA section */
  
  .bia-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .bia-container .left h1 {
    font-size: 80px;
    font-weight: var(--fw-bold);
    margin: 60px 627px 18px 105px;
    color: white;
    line-height: 96px;
  }
  
  .bia-container .left p {
    font-size: 18px;
    font-weight: var(--fw-regular);
    margin: 0px 632px 57px 105px;
    color: white;
  }
  
  .bia-container .left a.btn {
    text-decoration: none;
    color: rgb(0, 0, 0);
    border-radius: 10px;
    padding: 10px 23px;
    border: 1px solid #43D9B8;
    margin: 0 0px 108px 105px;
    color: white;
  }
  
  .bia-container .right {
    padding-right: 105px;
  }
  
  
  /* Background header */
  
  .bia-container .background {
    position: absolute;
    background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
    border-radius: 50px 50px 300px 50px;
    width: 1240px;
    height: 585px;
  }
  
  
  /* .bia-bg {
      position: absolute;
      z-index: -1;
  } */
  
  .bia-container .background .right {
    position: absolute;
  }
  #right-pic{
      width:200px;
      height:200px;
      position:absolute;
      right:100px;
      top:40%;
  }
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div >
    <nav >
      <div >
        <a href="#">
          <img src="Images/bia-logo.svg" alt="">
      </div>

      <ul >
        <li>
          <a href="#" >Home</a>
        </li>

        <li>
          <a href="#">Services</a>
        </li>

        <li>
          <a href="#">Contact</a>
        </li>

        <li>
          <a href="#" >Neem contact op</a>
        </li>
      </ul>
    </nav>

    <!-- End of desktop navigation -->

    <header >
      <div >
        <div >
          <h1>Make data work for you</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
          <a href="#" >Neem contact op</a>
        </div>

          <img src="./NewTux.svg" alt="" id="right-pic">
      </div>

      <!-- <img  src="Images/header-background.svg" alt=""> -->


      <!-- End of header section -->
    </header>
  </div>

  <script src="main.js"></script>
</body>

</html>

Page link：https//www.codepudding.com/Softwareengineering/242119.html

Prev:Why Wordpress post_name is returning multiple values?
Next:How to Fetch Webpage Through TCP socket using HTTP Request in JAVA
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding