Menu icon Foundation
How can I make my background image responsive?

Would somebody beadle to help me with my background image for my practice site? When I resize the browser window the image starts to respond to the browser viewport. After the browser viewport reaches a certain point, the image no longer resizes with the viewport.

Is there anyway I can make it so this images will respond all the way down to mobile size, or is that not possible? I did read over the documentation for Interchange: http://foundation.zurb.com/docs/components/interchange.html
But I don't understand how to add my image url to any of that.

Here is a link to my codepen: http://codepen.io/mike316/pen/aOdEea

And here is a link to the picture I'm using, just in case you may need to check the picture out. http://images.bwwstatic.com/columnpic6/300E1626-9C53-D81C-B166BC80502B1501.jpg

Thanks in advance for any help

Websitebackground Imageresponsive-image

Would somebody beadle to help me with my background image for my practice site? When I resize the browser window the image starts to respond to the browser viewport. After the browser viewport reaches a certain point, the image no longer resizes with the viewport.

Is there anyway I can make it so this images will respond all the way down to mobile size, or is that not possible? I did read over the documentation for Interchange: http://foundation.zurb.com/docs/components/interchange.html
But I don't understand how to add my image url to any of that.

Here is a link to my codepen: http://codepen.io/mike316/pen/aOdEea

And here is a link to the picture I'm using, just in case you may need to check the picture out. http://images.bwwstatic.com/columnpic6/300E1626-9C53-D81C-B166BC80502B1501.jpg

Thanks in advance for any help

This post has been closed. No new replies can be added.

aaron betts over 4 years ago

try background-size: cover.

for example:

.top { 
   background: url(../img/mybg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 800px;
  }

Rafi Benkual over 4 years ago

Cover is good if you dont mind some of the image overflowing off the page. Otherwise you can use background-size: 100%;