Stacksof99
Stacksof99

Reputation: 97

Center an image when displayed through css

I'm trying to center an image using only css, when the image is displayed using only css.

@media(max-width: 768px){
  .page-id-28 {
    background-image: url(http://4309.co.uk/wp-content/uploads/2019/10/IMG_2019107_1853-1.jpg) !important;
    background-size: 890px !important;
  }
}

Tried using url(foo) center;

Didn't work.

Upvotes: 0

Views: 63

Answers (2)

Johannes
Johannes

Reputation: 67738

background-position can be center center or 50% 50% (i.e. different values for horizontal/vertical are possible). You'll also need no-repeat. In the snippet below I used a smaller image size to fit it into the space available here:

body {
  background-image: url(https://placehold.it/400x180/fb8);
  background-size: 400px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

html,
body {
  margin: 0;
  height: 100%;
}

Upvotes: 1

use

@media(max-width: 768px){
  .page-id-28 {
    background-image: url(http://4309.co.uk/wp-content/uploads/2019/10/IMG_2019107_1853-1.jpg) !important;
    background-size: 890px !important;
    background-position: center;
  }
}

Upvotes: 0

Related Questions