The CSS background-size property can have the value of cover. The cover
value tells the browser to automatically and proportionally scale the
background image’s width and height so that they are always equal to, or
greater than, the viewport’s width/height.
To improve the page load rate on small screens, we’ll use a media query to serve a scaled-down version of the background image file. This is optional. The system will work without this.
But why is serving a smaller background image for mobile devices a good idea?
The image I’ve used in the demo is about 1080*720. This dimension will have us met at most widescreen computer monitors currently being sold in the market but at the loss of serving up a 1.7MB file.
That large of a payload just for a background photo is never a good thing under any sort of place, only it’s exceptionally bad on mobile internet connections. And also, the image dimension is unnecessary on small-screen devices.
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Backgrund Image</title>
<style type="text/css">
body{
background-image: url(img.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.content{
background:white;
width: 50%;
padding: 40px;
margin: 100px auto;
font-family: calibri;
border-radius: 10px;
}
p{
font-size: 25px;
color: black;
}
</style>
</head>
<body>
<div class="content">
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
</body>
</html>
Reviewed by easycoding
on
August 22, 2020
Rating:
No comments: