Responsive Headache


I have a site which I am currently making… Its half built for standard screens and I am starting into the responsive layouts to make a start on them.

I use a repeating background image in my body, outside the container… I also have a middle image inside the container which joins with the body background. I need them both to resize responsively.

I can get this to look ok now on my Galaxy S2 in portrait mode… but landscape it is all over the place.

Any ideas as to what I can do? I am missing a trick here and there which is probably pretty simple.

Yeah, bg images aren’t responsive at all (not in CSS2, anyhow), so there are problems with the layout. The first thing I’d do is make the header a 100% width div with the repeating grass background, then have an inner div to hold the dog image. That way, you don’t get the content below pushing up and making a mess of things.