4

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
  • 700
  • 15
  • 27

1 Answers1

10

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

Chris Brown
  • 4,029
  • 2
  • 27
  • 34