Why is there no picture showing in the background?-CodePudding

<div id="Image">
<!--         <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
    </div>

#Image {
    background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
    background-repeat: repeat;
}

I've made this code and/but I don't see any image. Why is that?

CodePudding user response：

add dimensions / content to the div. it has no size so the image can't be seen. ( eg. width: 200px; height: 800px)

You may also want to have a look at background-size, here.

#Image {
    background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");  
  background-size: contain;
  width: 800px;
  height: 200px;
  background-repeat: repeat;
  background-color: gray;
}

    <div id="Image">
<!--         <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
    </div>

CodePudding user response：

Here is two solutions:

#Image {
    background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
    background-repeat: repeat;
  width:100;
  height:100;
background-size: contain;
}
img {
  width:100;
  height:100;
}

<div id="Image">
First solution - This is not a good solution because the img could not be zoomed even using   scale:0.11;
    </div>
<img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes">
<!--Second solution:Using img and this is good-->