CSS: background-image not loading?-CodePudding

Heyya,

I've just started writing a website (I'm still pretty new to learning web dev) and I'm having issues with getting a background image to load on a website despite looking around and trying a bunch of different things.

.nav {
    width: 100%;
    background-image: url("../images/Shadex1.png");
    background-repeat : repeat-x;
    position : absolute ;
    height: 50px;
    left : 0;
    top : 0;
}

The idea is to get the image to repeat and cover the nav bar and I've tried using both a png and svg files, but I just can't get it to work. I can load the images in the html file and that works fine so I know the file path is correct but CSS just isn't liking it so need a second pair of eyes to take a look.

Thank you for reading and any answers you might come up with.

CodePudding user response：

Try to set width to 100vw and is the uri correct?

CodePudding user response：

Still not entirely sure why this isn't working above but I've been able to figure out that the issue is with class I'm targeting as the image loads fine when calling the same attributes in different elements.

Closing this thread.

CodePudding user response：

Make sure you are able to load the image background-image: url("../images/Shadex1.png"); property. I think there might be chances that url is wrong. if you are getting an image correctly than just see below example.

.nav {
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1657037031161-d126c02cce8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60");
  background-repeat: repeat-x;
  position: absolute;
  height: 100vh; /*I have added extra height for viewing image*/
  left: 0;
  top: 0;
}

<div ></div>