Center an image when displayed through css

Question

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.

if you will be doing `url(foo) center;` you need background and not background-image — Temani Afif, Jun 07 '20 at 12:44
@TemaniAfif correct to center. Can i adjust top and bottom somehow too? — Stacksof99, Jun 07 '20 at 12:48
@Vepthy It's in the center of the page but not in center of the image. Can i use something else to move it down the page a bit — Stacksof99, Jun 07 '20 at 12:54
Do you want to center an `` or `background-image`? As they said, use `background-position: center` — Vepth, Jun 07 '20 at 12:56
check this: https://stackoverflow.com/a/51734530/8620333 you will find what you need to make any position you want — Temani Afif, Jun 07 '20 at 12:58

score 1 · Accepted Answer · answered Jun 07 '20 at 13:05

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%;
}

score 0 · Answer 2 · answered Jun 07 '20 at 12:57

0

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;
  }
}

answered Jun 07 '20 at 12:57

Tothagata Bhattacharjee

23
5

Center an image when displayed through css

2 Answers2