How to center this image

[ChrisjChrisj]

This image displays in the top left corner of this black background. How can I center it?

Here’s the code:

#box{
background-color: #000;
width: 500px;
height: 415px;
background-repeat:no-repeat;
background-image: url('../img/touch.png');
}

[John_Betong]

The following link may be helpful:

https://www.w3schools.com/cssref/pr_background-image.asp

[PaulOB]

@ChrisjChrisj

How can I center it?

Have you tried setting the background-position to 50% or indeed background-position:center;

background-position - CSS: Cascading Style Sheets | MDN

[arifbd8464]

Please use this code.

#box{
background-color: red;
width: 500px;
height: 415px;
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
background-image: url('https://images.unsplash.com/photo-1613674131999-95ffb9a32caa?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
}