Full background image for my homepage

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.

    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.:slight_smile:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.