Search code examples
htmlcssbackground-image

Background-image for a flex-container

I am trying to set a background image for a flex-container. However, it doesn't seem to appear. Does anyone know why? Thanks.

css:

.sidebar { 
            display: flex;
            height: 710px;
            width: 30%;
            flex-flow: column wrap;
            align-content: center; 
            font-family: 'OpenSans, OpenSans-Regular';
            background-image: url("/images/IMAGE2.png");
            background-position: center; 
            background-repeat: no-repeat;
            background-size: cover; 
}

I don't see any error, as I've compared it to online examples. There is a background colour to the body, but it doesn't seem to affect other images.

Solution

  • I guess you have a folder to store your CSS files and another to store images. If that's the case, you will have to go to the parent directory and open the images folder using .. before the forward slash /.

    background-image: url("../images/IMAGE2.png");