5

I'm making a website where I need to have a notable difference between fill and center background images. My template is this:
Center: Uses native resolution to determine size. enter image description here Fill: Fits sides to fill screen without changing aspect ratio. Two sides exactly fit screen, while other two are cut off. enter image description here

I managed to get centered with

.center {
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: center center;
}

But I can't figure out how I would do fill. Any insight?

fin444
  • 725
  • 2
  • 14
  • 27

1 Answers1

11

I believe you want background-size: cover. Other background-size options.

Chris Brown
  • 4,445
  • 3
  • 28
  • 36