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 Michel Thomaz
Michel Thomaz
1,515 Points

Web-development - fixed content

I have a website and when i zoom out the content separates from the background. How can I make they zoom in and out together, set a default zoom for each browser and make a fixed background? (http://www.djmtz.com)

5 Answers

stoyantodorov
stoyantodorov
7,666 Points 
background: #fff url(http://www.djmtz.com/images/background.png) no-repeat;
stoyantodorov
stoyantodorov
7,666 Points

You may also want to add 

background-size: 100%;
Michel Thomaz
Michel Thomaz
1,515 Points

Thanks alot!

stoyantodorov
stoyantodorov
7,666 Points

I don't think it will work with auto, but you can try.

Michel Thomaz
Michel Thomaz
1,515 Points

Ok thanks alot, but the problem is that when I press SHIFT + COMMAND + PLUS (mac) until it gets to 25% the content get separated from the background. What should I do?

stoyantodorov
stoyantodorov
7,666 Points

Did you put the code in your css, where you are styling the body?

Michel Thomaz
Michel Thomaz
1,515 Points

Yes I putted directly on the style.css

stoyantodorov
stoyantodorov
7,666 Points
stoyantodorov
stoyantodorov
7,666 Points

Btw, why are you using absolute URLs in your css?

You can change url('http://www.djmtz.com/images/background.png') to url('images/background.png')

Michel Thomaz
Michel Thomaz
1,515 Points

If i do that it wont work.

stoyantodorov
stoyantodorov
7,666 Points

url('../../../images/background.png') will work

Michel Thomaz
Michel Thomaz
1,515 Points

It's not working for me. Look this is my current code: body { background: url('.../images/background.png') no-repeat; background-size: auto; font-family: Arial; font-size: 12px; color: #000; margin: 0; }

stoyantodorov
stoyantodorov
7,666 Points

background-size:100%;

make sure to watch again the videos about relative and absolute paths. that's pretty important. you can use absolute paths for now.

Michel Thomaz
Michel Thomaz
1,515 Points

I mean when I resize only the height it creates a white part at the bottom of the page. Do you know how can I fix that?

Michel Thomaz
Michel Thomaz
1,515 Points
Michel Thomaz
Michel Thomaz
1,515 Points

Ok so i fixed with the property background-size:100% but suddenly at the bottom at the page there is a white stripe. What can I do sr?

stoyantodorov
stoyantodorov
7,666 Points 
 background-size:100% 100%;
stoyantodorov
stoyantodorov
7,666 Points

also 

  background-attachment:fixed;
stoyantodorov
stoyantodorov
7,666 Points

Here is the whole thing:

body {
    background: #fff url(http://www.djmtz.com/images/background.png) no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
    font-family: Arial;
    font-size: 12px;
    color: #000;
    margin: 0;
}
Michel Thomaz
Michel Thomaz
1,515 Points

I did that and now its working fine! Thanks a lot master, I really appreciate your help.

Michel Thomaz
Michel Thomaz
1,515 Points
Michel Thomaz
Michel Thomaz
1,515 Points

Taking prove that you helped me already, i have another question. I have this website formatted this way but I want to change for mobile and tablets using the @media screen and... but with a completely different style with different pages, is that possible?

stoyantodorov
stoyantodorov
7,666 Points

It is. Watch the Treehouse HTML and CSS courses :D

You can overwrite any style in your media queries.

Michel Thomaz
Michel Thomaz
1,515 Points

I have watched already. But in Nick's tutorial he change a few things, not a massive change in the whole style. I want to change the whole website looking, also adding pages. Do you know how can I do that?

stoyantodorov
stoyantodorov
7,666 Points

Just overwrite the styles that you need to look different in your media queries. You can change whatever you want. Nick changed little things, you can change everything. It's up to you.

Michel Thomaz
Michel Thomaz
1,515 Points

Ok thanks. And if Im adding pages where should I put them?

stoyantodorov
stoyantodorov
7,666 Points

http://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-a-new-page

Michel Thomaz
Michel Thomaz
1,515 Points

I know I mean like one website the default I need to leave the way it is but for tablets and smartphones i want to create a whole new including new html and css, adding pages that does not exist in this one. I will send you the links for the website for smartphones I developed.

stoyantodorov
stoyantodorov
7,666 Points

Keep watching the videos about HTML and CSS and you will learn everything you need. Maybe check out some books too.

The point of media queries is to develop 1 site and change how it looks with the media queries, so it will work for mobile & desktop.

You don't need to create 2 separate sites.

Michel Thomaz
Michel Thomaz
1,515 Points
Michel Thomaz
Michel Thomaz
1,515 Points

Ok thanks for all! I'll keep watching if I have any doubt I will start a new discussion but thanks for all