Can't get background to scale properly

Hey there,

I was trying a parralax type effect where I have 3 different background images and the pages roll over that. Seems to look good on laptops/desktops but with anything like an ipad or iphone it’s terrible. Everything I have on the page is fairly dynamic so I don’t think it’s an issue with that, but I think it might be because of the layers that have the background images which are very large.

I included a link so you can see what I’m talking about:

Does anyone know of a way that I can change this so that it will downsize the background images on those layers so that it doesn’t wreck the whole site?

For smaller screens, I’d suggest throwing in an @media rule like so:

@media only screen and (max-width: 600px) {
    #headerwrap {
        background: url(../img/top-bg.jpg) #ffffff no-repeat center center [COLOR="#FF0000"]scroll[/COLOR];
        margin-top: [COLOR="#FF0000"]0[/COLOR]; 

Thanks, that got me part of the way.

I used:

@media all and (min-width: 320px) {
#headerwrap {
	background: url(../img/top-bg.jpg) #ffffff no-repeat center center scroll;

to set it down to the iphone minimum width and I finally got part of the image to show up so it didn’t look ‘as’ bad. :slight_smile: Just trying to figure out what is causing everything to be so big on this particular page. Normally if you load it on the phone you’ll get a mini version of the page and you can expand it to blow it up, but this one is like it’s been hard-coded for the elements so they start out big to begin with. Even if you look at the root site that I have this on it will look normal on a phone but with the large bg images it seems to throw everything off. It still doesn’t look right… but it’s much better than it was for sure.

Not really sure what you mean by some of that. The background-size: cover declartion tells the bg image to increase in size until it’s as wide as or as tall as (which ever happens first) the container.

You also haven’t set the margin-top to zero yet, which is why it’s overlapping the title a bit. You added in margin-top: 0 but left the margin-top: -60px lower down, which overrides it. Just chance the second and remove the first.


yeah, it’s tough to explain.

I’ll check on that. Thanks.

I guess it’s my newness to the responsive design but I think I liked it better when the things were one size so that’s what I’m talking about with the “mini” version of the site when they didn’t use that principal. It would just render a smaller version that would look like the site but it would be hard to see because you had to expand everything just to see what the heck it was.

Anyway, thanks for your help. I missed the other margin-top I had in there and when that was removed it fixed it up.

Thanks again.

It’s easy enough to go back to that if you want, but I wouldn’t recommend it. You just have to remove a few things that make it responsive, such as the meta element in the head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and the various media queries in the CSS. But responsiveness is baked in to that theme, and it would be messy to remove it.