Background image repeat in responsive design

Is there a way to specify a max-width for a background image repeating in a div vertically? I need to support IE8

Your two options for background images are to repeat and not repeat.

However, you can control the width of an element.

If you want to control with width of an image in a response design, that is a possibility as well.

Can you post the code you’re trying to work on?


Is there a reason you can’t use this,

Background-image: url (/yourimagepath.jpg) repeat-y;

Yourdiv img
Max-width: thewidthyouwantinpix;

Hope that helps,


A background image is a property, not an HTML element that can be selected. Using “yourdiv img” will not select the background image property. However, you can select “yourdiv” and set the width of “yourdiv”.

Thanks for your replies.

The problem I have is that I want to create a centred div (lets call it shadow), with another centred, smaller div within it (lets call it content).

This is easy enough to do responsively but the problem is that the body content is a pale blue and I want the shadow div to be shaded from its outside edges inwards. Its outside edges are the same colour as the body and the div gets darker as you progress to the center so that it looks like a wide shadow.

Usually I do this by creating a 5px high image the width of ‘shadow’ and repeating it vertically. The problem is that this doesn’t work with a responsive design where I don’t know the width of shadow. I need it to work in IE8 so can’t go for CSS3 solutions suggested online.

The only solution I can think of is to create 3 divs inside the shadow - one for each side of the wrapper. I thought I could create two background images - one with a light to dark gradient and one dark to light. I could vertically repeat the one light to dark on the left div and position it on the left and on the right hand div, repeat the dark to light image, repeating it vertically and position it on the right of the div. Sounds complicated I know, but might just work.

It sounds like you’re trying to replicate the box-shadow property. If so, try using for IE.

I am trying to make this demo responsive - in particular the blue background shading.

For that particular layout, I might recommend eliminating the gradients along the sides of the content block altogether.

You have a limited width to work with on mobile devices (280px width is the lowest common size, if I recall correctly), so any frilly design elements that don’t absolutely need to show up should probably be dropped–especially if they merely add width to your page.

Yes, I wasn’t too bothered about the shadow with mobile devices but still want it to show on tablets - especially in landscape view. It isn’t just this shadow, there are other times when I’ll want to do a similar effect and I want to know I can. I might just try this with media queries and different shadow images. This might be a leaner solution.

The box-shadow property would probably be easiest. A good portion of tablet browsers should support it.

You can specify starting and ending colors (or start with a color and stop with transparent).

Have to agree now and have settled for this as the code was just messy otherwise. Thanks for your help.