How to center an image in CSS?

How to center an image in CSS?


How can one set an image as a background for a page while not distorting it? When I use Bootstrap img-responsive class it appears to be ok. However, when I use the CSS property background:url() and only then set the image, it is way off. Is there something that centers an image just like the img-responsice class , but only for CSS?


try this:

background-image: url("url");
background-repeat: no-repeat;
background-size: cover;
background-position: center; 

if i understood correctly you want this image to be background of some section on your page. If that is the case this should work.


Bruh, I owe you a beer. Where did you learn all that?


I learned that way back and i remember i learned it from DevTips channel on youtube. Here is actual video. Travis is really good teacher, his css skills are amazing, anyway if you’re into design definitely check his channel.


Thank you! I’ll check it. I guess it’s better to combine FreeCodeBootcamp with other sources.


uh yes indeed. This isn’t a one stop shop. You’ll have to go outside of FCC often to find learning resources. By the time I hit the basic algorithms I started spending less then 50% of my time here. By the time I hit the intermediate algorithms it was more like 20%.