CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Tulun
Tulun

Reputation: 469

Keeping aspect ratio of divs with a background image

I have a background image that has a large blue diagonal across the back where we want some of our content to line up with.

I am having issues keeping the content inline as it resizes, though (the background diagonal gets bigger or smaller, making the alignment off).

Current css:

  background: url('../../../img/bg.png') center no-repeat;
  background-size: cover;

What might I need to keep the aspect ratio the same regardless of resize?

https://jsfiddle.net/wb166bdo/11/

Upvotes: 0

Views: 345

Answers (1)

itacode
itacode

Reputation: 3787

To maintain the ratio you could give a top or bottom padding in percentages that equals the ratio wanted. If the image is 200px x 100 px the padding will be 50%. The top and bottom padding in % refers to the width of the parent MDN.

Upvotes: 2

Related Questions