How to center an image in CSS?

1

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?

2

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.

1 Like
3

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

4

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.

1 Like
5

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

1 Like
6

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%.