As a newcomer to the world of programming, I recently embarked on the journey of learning about it just last month. Right now, I am fully immersed in creating my new website for a school project. However, I seem to be facing an issue with making the image responsive. Whenever I change the screen size, the image fails to adapt accordingly. Can anyone lend me a hand with this predicament? Your assistance is greatly appreciated. Below is the code snippet pertaining to the image:
section.sec1{
background: url(web.photos/pak2small.jpg);
background-size: cover;
background-attachment: fixed;
}
Here's the head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>2020 Web </title>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
var zero =0;
$(document).ready(function(){
$(window).on('scroll', function(){
$('.navbar').toggleClass('hide', $(window).scrollTop()
> zero);
zero = $(window).scrollTop();
})
})
</script>
</head>
here's the code for Html:
<div class="overlay">
<h1>Welcome to Pak courses</h1>
</div>
</section>
<section class="sec2">
<h4>About our school</h4>
<p>For a general overview of learning at Pakuranga College, please read the 2018 Prospectus. You can also find out what Nigel Latta thought about our school in his documentary entitled ‘School Report’.</p>
<h4>our philosophy</h4>
<p>Our college provides a very special learning environment. It is focused on developing outstanding citizens who are moral and respectful. We place an emphasis on ownership of learning and being actively involved so that our students are well equipped to succeed in the future.Students are encouraged to be interactive with teachers, technology and their peers to develop real understanding and, most importantly, to apply their knowledge to problem-solving. Rather than becoming repositories of knowledge, we expect students to find out, investigate and create solutions using the many resources around them.</p>
<h4>rules & expectations</h4>
<p>At Pakuranga College, we have high expectations for our students that relate to all aspects of school life. We believe that young people are more likely to succeed when they develop self-management skills and have the opportunity to show leadership in all of their endeavors.</p>
</section>
<section class="sec3">
</section>
Here's the Css code:
section{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
section.sec1{
background: url(web.photos/pak2.jpg)no-repeat center;
background-size: cover;
background-attachment: fixed;
padding-top: 42%;
}
section.sec2{
padding: 100px;
height: auto;
}
section.sec2 h3{
margin: 0;
padding: 0;
letter-spacing: 5px;
color: #111;
}
section.sec2 p{
font-size: 15px;
color: rgb(99, 99, 99);
}
section.sec3{
background: url(web.photos/pak3.jpg);
background-size: cover;
background-attachment: fixed;