for a small codeing project in codehs.com I have separate containers some labeled image some with actual images however i cannot figure out how to scale proportionally with size of webpage

here is the code for my project: index.html

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYY0m5M4elle5s14mIhUSPJQJNXWE626vaxJfyLMp-t5aQYsuS8fDBTApBr1bvM6Yu4L4:https://files.123freevectors.com/wp-content/original/110787-dark-color-blurred-background-vector.jpg&usqp=CAU);
  background-size: cover;
}


/* Header/Blog Title */

.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}


/* Style the top navigation bar */

.topnav {
  overflow: hidden;
  background-color: #333;
}


/* Style the topnav links */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Change color on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Create two unequal columns that floats next to each other */


/* Left column */

.leftcolumn {
  float: left;
  width: 75%;
}


/* Right column */

.rightcolumn {
  float: right;
  width: 25%;
  padding-left: 20px;
}


/* Fake image */

.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

#first3dp {
  background-image: url("https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg");
  background-size: cover;
}


/* Add a card effect for articles */

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Footer */

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}


/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */

@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

<div >
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzbKAzXZFQY6Sf3Jkfh_f8XPYJSMt1vHb5ZYCj4IjghC6Ue-cKiUAg78vx09asJCYmiw:https://www.fbla-pbl.org/media/2022/09/FBLA_HorizontalLogo_cropped-01.png&usqp=CAU">
  <h1>Alex's 3D Printing Journey</h1>
  <p></p>
</div>

<div >
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Contact me</a>
</div>

<div >
  <div >
    <div >
      <h2>Where it started!</h2>
      <h5>sometime, 2020</h5>
      <div  id="first3dp" style="height:200px;"> </div>
      <p>Some text..</p>
      <p></p>
    </div>

    <!--<img src="https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg"> -->

    <div >
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2022</h5>
      <div  style="height:200px;">Image</div>
      <p>Some text..</p>
      <p></p>
    </div>

  </div>
  <div >
    <div >
      <h2>About Us</h2>
      <div  style="height:100px;">Image</div>
      <p>text...</p>
    </div>

    <div >
      <h3>Popular Post</h3>
      <div >
        <p>Image</p>
      </div>
      <div >
        <p>Image</p>
      </div>
      <div >
        <p>Image</p>
      </div>
    </div>

    <div >
      <h3>Follow Us</h3>
      <p>Some text.. can use embed with social media links</p>
    </div>
  </div>
</div>

<div >
  <h2>Footer</h2>
  <h2>Footer to include credits to website creators and copyright information</h2>
</div>

use of background-size: cover; in the id #first3dp on style.css however it did fit it to the container it did not scale proportionally with the container rather resizing the image kicking it off screen

CodePudding user response：

your need to add the background-position property is you want a specific position when using background images in CSS.. add this code I also fixed your header which was overflowing.

.header > *{
  width: 100%;
}
#first3dp {
      background-image: url("https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg");
  background-size: 100% 100%;
    }

CodePudding user response：

On the header img use max-width: 100%;