CODEWITHSUNDEEP
htmlbackground-imagecss
jukooz
jukooz

Reputation: 85

How to make background-image size maintain its proportions?

Example: http://jsfiddle.net/SJUeK/

I want for a background image in example to be always its full height (dependent on width). I can't do it with pixels, because it needs to be responsive.

Is there a way to do that? Or need I to use img in html?

Thanks in advance.

Upvotes: 2

Views: 12296

Answers (2)

waspinator
waspinator

Reputation: 6816

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

https://css-tricks.com/perfect-full-page-background-image/

Upvotes: 0

Ry-
Ry-

Reputation: 224857

Sure:

background-size: auto 100%;

Here's a demo.

Or if you actually meant "maintain its aspect ratio and scale to fit inside the container", then background-size: contain should do the trick.

Upvotes: 5

Related Questions