0

I am running into problems at smaller device widths where a div becomes more square, and less landscape. The div's background image is set to background-size: cover; so it only occupies about the top 60% of the height of the div and 100% of the width.

How do I set a background image to cover 100% of the div's height, but maintain its aspect ratio, so that some of the background image will be cut off.

How do I align the background image so that its right side is at the right side of the div (and so the left of the background image will be cut off by the left side of the div).

Steve
  • 2,066
  • 13
  • 60
  • 115
  • height:100%;width:auto; ?? Oh yeah.. and make a div for your image in this instanse :D or just add it as img –  Mar 10 '18 at 07:22
  • 1
    can you supply your html please? as its likely something that may require more than just css to achieve :) – haxxxton Mar 10 '18 at 07:23
  • By not using `cover`, but `auto 100%` ...? – CBroe Mar 10 '18 at 09:36

2 Answers2

2

Add background-position to set the positioning of the image for the smaller devices.

{background-position: right top;}
Sonia
  • 1,909
  • 1
  • 11
  • 13
0

The two other possible values for background-size are contain and cover.

The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.

The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.

you can use any one of the above as per your requirement.

and to maintain the aspect ratio use 

 {object-fit: cover}
arunoday singh
  • 222
  • 2
  • 13