The size of the picture is 5834*3886 I wrote the code as shown but when I minimize the browser the picture size just change and part of it disappear , I want it to be fixed is there a way ?
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
flex-direction: column;
background: url(pic.jpg);
background-size: cover;
}
As per the w3schools documentation.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
It means the image will be spread in the div in a way that no edges will be left behind. And it will shrink based on the window size.
.item {
display: inline-block;
height: 200px;
width: 200px;
background-image: url('https://assets.dragoart.com/images/11939_501/how-to-draw-iron-man-easy_5e4c9ed9b16b58.14188289_53732_3_3.png');
}
.item1 {
background-size: cover;
}
.item2 {
background-size: contain;
}
.item3 {
background-size: 100% 100%;
}<div class="item item1">
</div>
<div class="item item2">
</div>
<div class="item item3">
</div>As you can see in the above snippet,
First item is background-size: cover;
Which means either width or height will be 100% in a way that there won't be any space left behind in the container even the other value overflows. This will keep the images original ratio of resolution.
Second item is background-size: contain;
Which means either height or width will be 100% in a way that, there won't be overflow, instead there will be space left behind in the container. This will keep the images original ratio of resolution.
Third item is background-size: 100% 100%;
Which means the width and height will be 100% in a way that there won't be any space left behind and there won't be any overflow. This will not keep the images original ratio of resolution.
Hope this would clarify your doubt.
You need something like this.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
text-align: center;
}
#ex {
text-align: center;
background-image:
url("https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Example for fixed Background Image</h1>
<div id="ex">
<p>
Paragraphs are the building blocks
of papers. Many students define
paragraphs in terms of length: a
paragraph is a group of at least
five sentences,
</p>
<br><br>
<p>
a paragraph is half a page long,
etc. In reality, though, the unity
and coherence of ideas among
sentences is what constitutes a
paragraph.
</p>
<br><br>
<p>
A paragraph is defined as “a group
of sentences or a single sentence
that forms a unit” (Lunsford and
Connors 116).
</p>
<br><br>
<p>
Length and appearance do not
determine whether a section in
a paper is a paragraph.
</p>
<br><br>
<p>
For instance, in some styles of
writing, particularly journalistic
styles, a paragraph can be just
one sentence long. Ultimately, a
paragraph is a sentence or group of
sentences that support one main idea.
</p>
<br><br>
<p>
In this handout, we will refer to this
as the “controlling idea,” because it
controls what happens in the rest
of the paragraph.
</p>
</div>
</body>
</html>Let me know if this will work for you.
Please see this code...
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
flex-direction: column;
background: url(https://data.1freewallpapers.com/detail/calm-body-of-water-surrounded-with-trees-and-mountains-during-daytime-4k-nature.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Images</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section>
<div class="contact">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h1>
</div>
</section>
</body>
</html>