0

I am attempting to get a background-attachment:fixed effect, as in this article from Chris Coyer.

jsFiddle Example with my code

My goal is to make this effect responsive, but my concern is that the specified sizes rely on the px size, which is not responsive.

Therefore, I created the below example with two "windowed" images: WD2 and WD4. The 2nd one (WD4) shows the desired effect, but it relies on the px size. Therefore, I am trying to make the first one (WD2) grow its background image to create the same effect as in WD4.

Since placekitten serves px-sized images, I am beginning with a smaller image and trying to grow it to fit the desired size. Trying to "grow" the smaller image is my testing approach - I am not committed to this example. If anyone can create a better test/example, please do.

HTML:

<div id="wd1"></div>
<div id="wd2">
    <div id="d2"></div>  <--- small image. Cannot expand and get desired effect
</div>
<!-- --------------------------------------------- -->
<div id="wd3"></div>
<div id="wd4">
    <div id="d4"></div>   <--- Large image - Works! But need to grow a small image
</div>
<div id="wd5"></div>

CSS:

#wd1{width:100%;height:400px;background:red;}
#wd2{width:100%;height:200px;background:url(http://placekitten.com/98/48) 100% 300% no-repeat;}
    #d2 {width:100%;height:200px;}
#wd3{width:100%;height:800px;background:green;}
#wd4{width:100%;height:200px;background:url(http://placekitten.com/798/501) no-repeat fixed;}
    #d4 {width:100%;height:200px;}
#wd5{width:100%;height:500px;background:green;}

I found these two SO questions, but I cannot see how to use them to make my example work:

Can background image extend beyond div's borders?

Stretch and scale a CSS image in the background - with CSS only

Community
  • 1
  • 1
crashwap
  • 2,846
  • 3
  • 28
  • 62

1 Answers1

1

May be simply background-size: contain; ?

#wd2{width:100%;height:200px;
    background:url(http://placekitten.com/98/48)  no-repeat fixed;
    background-size: contain;
}

fiddle

Posibilities that you have:

contain will adjust the size of the image so it is the biggest size posibility without gettin cut. This means tha you see all the image, but will likely leave blanks in one direction or the other

cover will adjust the image to do not leave any blank space. but will cut some part of the image, and more will be cut as bigger is the difference in aspect ratio between the image and the container div.

In your website, I would use

background-size: cover;
background-position: center;

but that is a personal decision: play with it. (or you can make the div higher, so the aspect ratio is more similar to the image)

vals
  • 61,425
  • 11
  • 89
  • 138
  • 1
    Vals is right. I actually think `background-size: cover` would be more useful in this case. – Will Thresher May 05 '15 at 19:04
  • Aargh! Your code worked in the fiddle, but having difficulty with live site. I could use your thoughts on this. Website is bluecoonmedia.com, image is in WD3 (pale image of street painter in blue jeans). Would be grateful for any thoughts, tips, advice. – crashwap May 06 '15 at 01:35
  • The problem in your website is that there is a huge difference in aspect ratio between the image and the containing div. See my an answer for an extended explanation. – vals May 06 '15 at 18:52