html – Background-image for a flex-container

html – Background-image for a flex-container

I guess you have a folder to store your CSS files and another to store images. If thats 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);

Maybe you dont 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

html – Background-image for a flex-container

Leave a Reply

Your email address will not be published.