Dynamic image sizing & preventing overlapping


When using images as either a background image or on their own, I can't figure out how to prevent overlapping. I'm also interested in scaling the image so it fits based on the class positioning. I've tried borders, padding, & margin, but they don't seem to work properly. I believe setting the class height worked, however this doesn't seem like a very good work around. Thanks for any help!


Have you read about background yet? And all the property's you have available when dealing with background-image.

Do you have a specific situation where overlap occurs? If yes, could you post your code so i can explain it, which gives you a better understanding? If i just have to cover each scenario i can think of with your current question, i could write more then codecademy would allow me (i believe the max is 3000 charachters)


Thanks for the response. I did look over your background link and previously properties for CSS rules.
My website displays like this in fullscreen:

How much is cutoff varies because I set a fixed height property for the "jumbotron" class it's in.

.jumbotron {
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;

.jumbotron .container {
  position: relative;

The class under it is:

.neighborhood-guides {
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;


You use bootstrap, how did you manage to get image overlap with bootstrap?


Lmfao how I managed to miss the background-size property multiple times is beyond me. I pretty much fixed it with:

  background-size: auto 100%;
  background-repeat: no-repeat;

I'm sure I can figure out the scaling with the class it's in, and I simply don't recall centering, I remember something with both floats to auto.


background-size is super useful, you need that property for background. Centering what? You can center a block element with margin: 0 auto;