0

I have a header set to 1/3 of the of the site. I have a background image set to 

'... cover centre center no repeat fixed'

and have a parallax effect applied to it by skrollr. (This set up works best so far)

It works close to how I want it but it crops the image when the window is resized. The image has important information in the middle which I want visible no matter the size of the screen/header. I've seen it done where the image ratio says the same when div size changes and the majority of the image and its placement stays the same.

What is he best way to accomplish this?

user3550879
  • 3,389
  • 6
  • 33
  • 62
  • 1
    @dbeaulieu - He's using a background image, there is no image tag. – Axel Feb 04 '15 at 17:16
  • You also have a typo at `centre center`. It should be `center center` or `50% 50%` works as well. – Axel Feb 04 '15 at 17:17
  • @axel thanks for pointing that out, I'll be sure to read more carefully next time. – Dan Beaulieu Feb 04 '15 at 17:18
  • The problem still exists. The image scales from top-left so te bottom gets badly cut-off depending mostly on the height of the window. The effect is a "collapsing header" effect (changing background position) – user3550879 Feb 04 '15 at 18:43
  • have you tried this yet: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background – Dan Beaulieu Feb 04 '15 at 23:36
  • It's hard to make further suggestions without seeing more code or a jsFiddle; have you tried: background-size: 100% auto; – Dan Beaulieu Feb 04 '15 at 23:38
  • I have solved my issue just recently, and yes it involved the addition of background size, and the addition of introducing a size to parent divs and removing the cover function. This may not be the best option, but my image background (or lack there of) makes it possible. I'd credit you @dbeaulieu if i could – user3550879 Feb 05 '15 at 00:07
  • glad you figured it out! – Dan Beaulieu Feb 05 '15 at 00:32

0 Answers0