Search code examples
htmlcssbackground-imageimage-scaling

HTML CSS background-image property does not work at all


Ok so I am making a website which has a large background image with some text over it at the top. I have previously used just an <img> tag, but is scales terribly on mobile leaving the entire image still present but just handing off to the right side of the screen.

To solve this, I found a tutorial by w3schools (https://www.w3schools.com/howto/howto_css_full_page.asp) which shows you can set the background to an image. I have tried this css and put it on a <div> but I cannot get the image to actually show up.

This is my css which should show the image.

background-image: url("home background image.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-content: center;

I have moved the image into the root folder of the site and it still doesn't work.

Thanks


Solution

  • Ok so I have located the solution! The image was set to be very small and was being covered by the navbar my site has.

    My solution was to change the height from 100% to 55vw.

    Thank you for you help.