Background-image for a flex-container

user_14295030 0
Viewed 2451

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.

background-image css html
2 Answers

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");
user_141935500

Maybe you don't mention the image address correctly. I just try it with one example to make sure and it is working fine.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: green;
  background-image: url("https://i.pinimg.com/736x/3b/af/e6/3bafe638ffbd522cb450f81235d87426.jpg");
  background-position: center; 
  background-repeat: no-repeat;
  background-size: 100px 100px; 
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

</body>
</html>

enter image description here

user_56792700
Related