Question

I’m working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I’m having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.

A couple screen shots:

When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I’m a new user can’t post images)

When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk

CSS:

h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}

What’s the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?

Answer 1

For making the background fit to the container it belongs to, set the background-size to cover

h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.