Changing Background for Mobile

It seems that a lot of responsive websites have backgrounds which change as you thumb through them. (I guess the alternating background is supposed to represent “pages” on the continuous scroll page?)

How is that done?

I would guess you set the background in the css file and then use a different background for the body or div in a media query.

Sorry I misread the post - just have a different background set in the header of each page via css.

Or are you talking about single page websites?

Go to this website:

Then go into Chrome Developer Tools, choose iPhone4, check “screen resolution”, check “fit”, and then scroll through it and you will see varying background colors that seem to demarcate pages…

Did you notice the “See how our site was made” link near the bottom?

I took a quick look and it appears like it should be helpful.

1 Like

Nope, I didn’t see anything that helped.

It’s not really clear what you’re asking. There are various sections with different background colors. Is that what you’re asking about, or something else I’m not seeing?

If you go to the website in post #3 and follow the settings I mention, as you thumb through the website’s home page you will see the background color change.

I am used to the background being the same for an entire webpage.

Is the page structured into sections and each section has its own background color?

Yes, and that’s the case on all screen sizes. Half the sites on the web do this kind of section styling. Normally, each section has a full width container.

So, this is a good way to use the new “section” element! :smile:

Do you have any opinions on this approach?

I basically use that approach on every site I build—even if just for the header and footer, so to speak. I quite like having full-width sections that help break up the content visually.

Yeah, I like the look of the link above.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.