Hi, I been trying to create a background image for my header for my index page. Ive tried to use 100vh but it seems to be longer and overflow than I would like it to be. I just want first part of my site to have a background picture behind my logo.
For example like this site https://www.nvayrk.com/ which covers the page on mobile aswell and doesn’t overflow.
Is there a set height for this? Or a generic way to do this that works on all devices and browser.
Any help would be much appreciated.
.fullWidthBG{
background: url(../path/to/your/image.jpg) 0 0 no-repeat;
background-size: cover;
}
Are you after a full ‘viewport height’ image or just an image to cover the header?
Background-size:cover as jgetner has shown above will ensure a background image covers the element itself but if you want the element to cover the viewport then that element will need 100% height which can be done easily with 100vh for modern browsers or something like this for older browsers.
Maybe put up a codepen of what you have and we can offer more specific code.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.