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%;
}
On the header img use max-width: 100%;
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 class="header">
<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 class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Contact me</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Where it started!</h2>
<h5>sometime, 2020</h5>
<div class="fakeimg" 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 class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2022</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p></p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Us</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>text...</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
</div>
<div class="card">
<h3>Follow Us</h3>
<p>Some text.. can use embed with social media links</p>
</div>
</div>
</div>
<div class="footer">
<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
What is the expected result ?
Use a
thank you I was unaware of the contain property
if 100% width for your header image is too much than what you like simply adjust the percentage number I recommend around 50% or 70%
thank you for going above and beyond on helping me with my project