0

I'm trying to figure out the best method for making a background image fully responsive - so far the best way I can figure out is to use background-size: cover, as most people tend to suggest, but with background-attachment: fixed so that the image scales down it's proportions as the screen resizes, otherwise it just retains it's original proportions and doesn't scale at all. Using just background-size: cover stretches the image to fill the container div, but won't automatically scale proportions..

However I don't want the effect of fixed background that hides part of the image as you scroll down and would prefer it to be background-attachment: scroll, but I can't get that to work and make it scale as well.

So my question is: is there any way I'm not aware of to have the background images scale automatically with screen size without having to use background-attachment: fixed to achieve it?

Please see my JSFiddle for what I've got at the moment: https://jsfiddle.net/uhoL5d5w/2/

(and yes I'm also aware I will be needing to use media-queries at some point to serve optimized images to the various screen sizes)

My current code looks like:

<header>
    <div class="launch-bg">
        <nav class="menu">
        </nav>
    </div>
</header>

<div class="page-wrapper">

</div>


<div class="push"></div>

<!-- Footer -->

<div class="footer"></div>


html,
body {
  @include box-sizing(border-box);
  height: 100%;
}

div,
body {
  margin: 0;
  padding: 0;
}

body {
  display: block;
  background-color: #000000;
}

.page-wrapper {
  margin: 0 auto -900;
  min-height: 100%;
  height: auto;
}


* {
  margin: 0;
  padding: 0;
}


header {
  display: block;
  width: 100%;
  height: 1200px;
}

  .launch-bg {
    height: 1200px;
    background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
  }

.footer {
  height: 900px;
  padding: 6% 0;
  color: $white;
  background-image: url('http://s8.postimg.org/onib5lmg5/footer_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
FuManchuNZ
  • 185
  • 2
  • 16
  • The initial value for background-attachment is scroll - it doesn't need to be declared. It's like saying: `div { display: block; }` Also, `background-size` does not (and will not) work with any `background-attachment:fixed`. Related: http://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im – Adam Jenkins Jun 17 '15 at 00:44

1 Answers1

0

Here's a simple example, I think, of what you're asking for, just trimmed it all down for clarity:

header {
  display: block;
  width: 100%;
  height: 1200px;
  background-image: url('http://s8.postimg.org/56xlj2rc5/launch_bg.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
Cooper Buckingham
  • 2,503
  • 2
  • 15
  • 23
  • `background-attachment: scroll` is redundant - `scroll` is already the initial value in CSS for `background-attachment` – Adam Jenkins Jun 17 '15 at 00:45
  • I included it to ensure he knew not to use fixed, or other values, like in his fiddle. But still good to point out. – Cooper Buckingham Jun 17 '15 at 00:46
  • Unfortunately this isn't quite I am looking for... this stretches the image too much (it's not fitting properly on my screen) and it's no longer scaling... as I said I had already tried using background-attachment: scroll with the cover property... – FuManchuNZ Jun 17 '15 at 06:05