Hey All,
In this site that i am making it ends up getting a horizontally scroll whenever i try to put in this truck image as a background to a div . I’ve tried playing with the position types on html, body, and the div it self. I’ve tried setting the background size different ways. I played with the height & width of the truck div and the image it self (through using background-size: x% x%) but am having no luck in getting the page to not have a horizontal scroll.
I’ve tried every different combo and setting i could think of…
If any thoughts or ideas on how to resolve this i would really appreciate it.
Code:
https://codepen.io/Cl0udFir3/full/NWrVMRQ
Hey ,
I would recommend you using vw and vh sparingly, and make sure you understand how they change your layout, they may be tricky, be careful with {width:100vw}, it doesn’t deduct vertical scrollbar width ( about 28px, which results in horizontal scroolbar, {width : 100%} is your best bet.
As for background size, there are better options for this working out of the box, like background-size: cover/contain see w3schools CSS background-size Property
1 Like
Hey,
Thanks very much, i almost dismissed this because i thought i had tried it already, changing it from vw to %, but after looking over my code i only changed some elements to % and left others at vw. It made me think it didnt matter.
But when i changed all the elements from vw to % it resolved the issue and no more Horizontal Scroll 
Thanks!!
1 Like