Responsive Headache

HTML & CSS
1

Hi,

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.

http://mgdesign.hostultra.com/24hbk/

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

2

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.