Я новичок в программировании, только начал узнавать об этом в прошлом месяце, и сейчас я работаю над своим новым веб-сайтом для школьного проекта, и я не могу каким-то образом адаптировать изображение. Я хочу, чтобы он был отзывчивым при изменении размера экрана, пожалуйста, кто-нибудь может мне помочь, спасибо. Вот код для изображения:
section.sec1{
background: url(web.photos/pak2small.jpg);
background-size: cover;
background-attachment: fixed;
}
Вот голова:
<!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>
Вот код для 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>
Вот Css код:
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;