Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Martin Barron
Martin Barron
8,478 Points

Over complicated background / My head is hurting

Hi All,

I'm working on my first ever website and I've managed to solve most of the problems I've come across but this one is beating me at the moment. If any of you have any tips that'd be great!

I built this site for a friend of mine:

http://www.monique.me.uk/test3

As you can see it is not responsive so I then changed (or rewrote!) the code to make it responsive.

http://www.monique.me.uk/testmobile/

However I have a problem with the background: As you can see the original backdrop is designed so that each white box sits on a different backdrop. The problem when it becomes responsive is that the boxes change height and therefore the backdrop won't line up. I've tried solving it by using separate div elements absolutely positioned with a negative z index stacked on top of each other. These can then adjust height using media queries.

The problem is that mobile devices think these are content and then often zoom out to see the whole backdrop or allow the user to scroll around which is ugly.

Any tips on how to solve this would be mush appreciated! Sorry for the novel!!!

Many thanks

Martin

Martin Barron
Martin Barron
8,478 Points

Sorry heres the code

HTML:

<body>

<div id="background-about"></div>
<div id="background-aboutgrad"></div>
<div id="background-with"></div>
<div id="background-photos"></div>
<div id="background-gigs"></div>

<--! rest of the code follows -->

#background-about {
    background-image:url(backdrop/Backdrop_about.png);
    background-repeat:repeat-x;
    background-size:contain;
    background-position:top;
    width: 2032px;
    height: 1230px;
    background-color: #005;
    margin-left: -1015px;
    left: 50%;
    z-index: -10;
    position: absolute;
    top: 0px;
}

#background-aboutgrad {
    background-image:url(backdrop/Backdrop_about_grad.png);
    background-repeat:repeat-x;
    background-size:contain;
    position: absolute;
    margin-left: -1016px;
    left: 50%;
    top: 1230px;    
    z-index: -8;
    width: 2032px;
    height: 100px;
}

@media (min-width :750px) {

    #background-about {
    height: 800px;
    }

    #background-aboutgrad {
    top: 800px;
    }


}
eck
eck
43,038 Points

Just for some clarification, are you trying to get the background image from the static page to display in the responsive page?

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Martin,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hope this helps.

10 Answers

eck
eck
43,038 Points

There is actually a lot to talk about here, and before giving you suggestions on how to implement these background images I just want to give you something to think about. The usage of many and/or large images on mobile devices can have a big impact on page speed. You need to be sure that you follow best practices when adding images to the web, especially when doing so for mobile. Make sure you "Save for Web" when saving out images from Photoshop, or whichever photo editing tool you use, and do what you can to reduce file size without impacting quality too much.

Another thing to consider for mobile design, is that space is at a premium. When your web page is brought down to mobile width there is almost no space to even see the background images. So what you have are graphics being downloaded and rendered, but not actually seen. I encourage you to think about which images should be shown for desktop, and which design elements should be trimmed off for mobile.

I took a look at how you are displaying your background divs and did some tweaks to the css for the "about" section:

#background-about {
background-image: url(backdrop/Backdrop_about.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
/*changed width to 100%*/
width: 100%; 
height: 1230px;
background-color: #005;
/* margin-left: -1015px; */
/* left: 50%; */
z-index: -10;
position: absolute;
top: 0px;
}

There is a lot of customizing that can be done to background images. You can determine most of the sizing without creating enormous elements to place them on. I would suggest that you remove the absolute positioning from the layout and spend some more time researching what you can do with css background- properties.

I hope this gives you a bit more direction, but there is not a single decisive answer I can offer you for this.

Shawn Williams
Shawn Williams
14,762 Points
Shawn Williams
Shawn Williams
14,762 Points

You need additional media queries, or the query you are using is incorrect. Standard min-width: is 768 pixels for tablet devices.

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

Thanks for your responses!

Erik:

I want to split the backdrop into sections of 2032 wide and a variable height between about 800px and 1200px depending on the width using media queries.

The problem is if I do this with DIVS then some devices (my mobile) think the DIVs are content and then shows all of them. I want the mobile just to focus on the content wrap (480px wide).

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

Hey Shawn. Thanks for the tip on the tablet width.

How can media queries be used? Would you need to set the width of the DIVs to the same as the viewport width? Is that possible?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Martin,

I have to agree with Erik, in that you need to keep the mobile site as simple as possible. People are going to be loading the site on 3G, with those background images loading I would think people will get sick of waiting for the site to load and move on.

Think about simplifying the page, do you really need to load all the pictures for a mobile site? or can you just pick out some, maybe make them a little bigger. I would suggest getting a app (don't know if your on Mac or Windows) that will strip the images of their size but keeps the quality, that way you'll help speed up load times.

Remember most people looking at the site on a mobile device (phone) won't be wanting to read everything there is to know, they will more than likely be looking for specific facts.

Just my thoughts :)

P.S And it will save you a headache

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

Hi Wayne and Erik

Well.. thank you both so much for you considerate response - They are a massive help! :)

Erik I think your code works beautifully so that's great. And Wayne I totally agree with cutting down for mobiles. I was also sort of thinking about desktop browsers as they are reduced in width. I was going to reduce all the images once the layout was finished but I think its also going to be better to cut the large background images out totally for the mobile site and get find a simpler option. If I use media queries then I can use them to make sure the mobile version only loads the low res images. Is that the best practise?

I will also have a look into background properties.

As a thank you for the both of you I would like to tell you a joke I made up. Would that be okay?

Martin

eck
eck
43,038 Points

Media queries are how I would restrict the images loaded for mobile.

As for whether or not the joke is okay depends on the joke :P

Wayne Priestley
Wayne Priestley
19,579 Points

I love a good joke :)

I wouldn't go for low res images for mobile as lots of folk have high res screens, id go for high res images with lots of data stripped out to reduce the file size, if your on a Mac there are apps to do that or check out sites such as Tinypng or imageoptimizer that will do it for free.

As for desktop browsers, I don't see you having much issue there. These days, apart from netbooks we all have pretty decent size screens.

Hope this helps.

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

Okay great. Will look into tiny png and imageoptimizer. Thanks again for the help it's much appreciated!

As for the joke:

Why was the money sad?

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

Okay great. Will look into tiny png and imageoptimizer. Thanks again for the help it's much appreciated!

As for the joke:

Why was the money sad?

Wayne Priestley
Wayne Priestley
19,579 Points

I don't know...

Why was the money sad?

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

because it was a loan.

thank you and good night!

(Sorry)

Martin Barron
Martin Barron
8,478 Points
Martin Barron
Martin Barron
8,478 Points

because it was a loan.

thank you and good night!

(Sorry)