CSS: How to make div background width fit
Question
Sorry if this question is duplicated, I cannot find one.
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html: body{ margin; 0px: padding; 0px. } body { }:image { overflow; hidden: background-size;cover: background-position; center: background-repeat; no-repeat: background-image: url('https.//i.ibb.co/svvK5z4/about-background;jpg'): display; block: width; 100%: height; 100%: position; absolute; } </style> </head> <body> <div class="image"></div> </body> </html>
I want to make this background's width fit perfectly to the screen and adjust the height to the ratio(This image's height is way longer than width, therefore horizontal scrollbar will appear.)
and when I decrease the width of the browser, It just cut itself so I don't have to see the vertical scroll bar. All I want to see is horizontal scroll bar.
Sorry for the bad explanation. I will respond as fast as I can if you have any questions.
2 answers
solution1
1 2020-05-06 21:19:54
You image is not the right shape so it will look deformed in a rectangular screen. I cut it to be rectangular. Is this what you want?
html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; }.image { background-repeat: no-repeat; background-size: cover; background-position: top; background-image: url('https://i.imgur.com/9hXcf0G.jpg'); display: block; width: 100%; height: 100%; } p:first-of-type { margin-top: 0 }
<div class="image"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue sed nibh vel pulvinar. Praesent nisl tellus, vestibulum ut metus sed, auctor elementum urna. Phasellus ullamcorper augue luctus orci rutrum, non finibus velit faucibus. Aliquam vel tortor interdum, gravida lacus quis, sollicitudin ligula. Maecenas sed nulla in nulla gravida iaculis pellentesque non neque. Quisque interdum pretium tortor. Aliquam erat volutpat. Nunc non cursus justo, et vehicula ligula. Fusce imperdiet maximus fermentum. Curabitur eget ultricies leo. Nulla facilisi. Integer arcu dui, sagittis fermentum orci et, sollicitudin iaculis enim. Mauris diam augue, condimentum vitae gravida ac, fringilla sed ipsum. </p> <p>Aenean ut ultrices orci, id iaculis ante. Pellentesque aliquet nulla vitae accumsan interdum. Integer commodo eu tortor eu tempus. Suspendisse quis leo non tortor auctor accumsan sit amet id justo. Integer eget vulputate diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum efficitur consequat convallis. Aenean ac orci justo. Nam non mi ornare, accumsan odio sed, efficitur risus. Ut gravida vestibulum vestibulum. Nullam eget rutrum arcu, vitae efficitur nisi. Aliquam quis ipsum fermentum, varius arcu vitae, interdum neque. Maecenas nec arcu vitae nulla placerat hendrerit. Vestibulum vitae convallis ex. </p> <p>Sed nec porttitor lacus. Integer quam lectus, volutpat eu quam vitae, efficitur pulvinar libero. Vivamus ut dui eu dui venenatis suscipit ornare quis nunc. Aliquam a dolor eget risus vehicula mollis eu eget ante. Mauris at arcu sed purus cursus laoreet. Aliquam efficitur non dui ac semper. Phasellus non interdum arcu. Etiam dolor mauris, elementum sed egestas nec, condimentum sit amet elit. Phasellus laoreet, ligula vel feugiat tempus, neque lorem rhoncus dui, et mollis dui risus ut mi. Phasellus accumsan urna eu vehicula lacinia. Cras auctor ipsum ligula, non feugiat turpis molestie at. Mauris varius ex ut vulputate accumsan. Etiam et tristique metus. Nam dignissim sapien vitae ipsum elementum faucibus id ac tortor.</p> </div>
solution2
0 ACCPTED 2020-05-06 19:53:15
How about trying this:
.image {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Of course, make sure to change the URL to your needs. This should also fit the full screen for any browser or screen size. You can read more about that here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to make css div child width fit with div parent
How to make input fit on a layer of div width with css
css: Making background image fit height and width of div
How to make a div fit the whole width?
How to make image fit to its div CSS
Make the image fit inside the div using background image in CSS
How to make the div width fit the table which inside the div?
Make content fit to the width of the div
Make content fixed width but make DIV background extend. (CSS)
How to make the background image of the pseudo element stretch to fit the width?
Related Tags