How to center this image

HTML & CSS
1

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');
}
2

The following link may be helpful:

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

1 Like
3

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

2 Likes
5

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');
}
1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.