0

I have a container div:

<div id="fullpage" class="fullpage_bg">
    ...rest of the elements
</div

It has a background image for portrait and landscape:

#fullpage {background-color: rgba(0,0,0,0.2); background-position: center center;}
@media screen and (orientation:portrait) {
    .fullpage_bg{
        background-image: url('images/bg_portrait.jpg');
    }
}
@media screen and (orientation:landscape) {
    .fullpage_bg{
        background-image: url('images/bg_landscape.jpg');
    }
}

Is there a way to scale the image proportionally, either by using CSS or pure JS (no jQuery), for different screen sizes? For example: for landscape the image might take the entire height of the screen, but still have some margins on the sides (because the image must maintain proportions, but still fill the screen as much as possible). In portrait it might take the entire width, but have some margins on top and bottom. Thanks!

Igal
  • 5,833
  • 20
  • 74
  • 132
  • Possible duplicate - http://stackoverflow.com/questions/11205553/how-to-scale-a-background-image-without-losing-proportions?rq=1 – Paulie_D Feb 18 '15 at 13:23
  • I have always this very well made web site about fixing a background image proportionaly to the screen, take a look at : http://css-tricks.com/perfect-full-page-background-image/ and tell me if it helped you. – Anwar Feb 18 '15 at 13:23

2 Answers2

0

I highly recommend Chris Coyier's Perfect Full Page Background trick.

The trick is setting the background-size property to cover, and the attachment property to fixed.

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;
}
Matt Rothenberg
  • 86
  • 1
  • 6
  • It's sort of helped: based on the info in the link, I decided to go with an absolutely positioned div and image inside it as my bg. Thanks! :) – Igal Feb 18 '15 at 16:12
0

You can try 

background-size: cover

or 

background-size: contain

See here for more details on this property

Alex Kopachov
  • 723
  • 4
  • 9