Reputation: 97
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
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
Reputation: 23
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