Why is my background image not showing up?-CodePudding

A lot of people have asked a similar question but i cant find how they apply to my situation specifically.

.container {
  margin: 0 auto;
  background-image: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') no-repeat;
  background-size: 100px;
}

<div >


</div>

Do I need to add something in the div to make it appear? I thought if i just made a div and define the width it would work but I'm stumped. And I know its something super simple I'm missing

CodePudding user response：

You have to give width and height to the container. And Remove no-repeat and instead add this background-repeat: no-repeat;

CodePudding user response：

the no-repeat it's causing the first problem, not allowing the value to be apply to the background-image, and your container doesn't have a height in this example, you will need to specify it or add content to the container

.container {
  margin: 0 auto;
  background-image: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80');
  background-size: 100px;
  background-repeat: no-repeat;
  min-height: 100px;
}

<div >


</div>

CodePudding user response：

You need to add a height, and need to remove 'no-repeat' from the background-image declaration. There is a declaration background-repeat we can use instead.

.container {
  /* added these next 2 lines, and remove 'no-repeat' from the background-image */
  height:200px;
  background-repeat: no-repeat;
  width: 200px;
  margin: 0 auto;
  background-image: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80');
  background-size: 100px;
}

<div >


</div>

CodePudding user response：

.container {
      margin: 0 auto;
      background: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') no-repeat;
      background-size: 100px;
      height: 151px;
      width: 100px;
    }

<div ></div>