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

Seth Barthen
Seth Barthen
11,266 Points
Posted by Seth Barthen
Seth Barthen
11,266 Points

How can I get images like this on my site?

I'm trying to get some background images to enhance my website but I'm not sure how to do it.

Check out this site to see what I'm talking about.... http://realestatetomato.com/

Notice when you scroll down. That first part where it says "What we do" I love that effect! But I'm wondering how they got it to only show like 200-250px vertically and how did they actually get the image to do that? I believe it's with the cover property.

Anyways, if someone could show me how or point me to a guide on how to do it I'd really appreciate it!

2 Answers

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

it's called PARALLAX

("Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.")

but you can also try "position: fixed"

just have all 3 images fix positioned one under another and then your page content (once its long enough) will scroll like this keeping background images fixed in place... (haven't tried this with more than one image though).

other than that there's loads of .js / jQuery plugins out there to try that let you do parallax scrolling!

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

hmmm... I'll look into parallax. I went through the background videos here at treehouse. I tried messing around with it a little like this. 

.biz-app {    
    height: 500px;
    background-image: url('../img/service-pics/webdesign.jpg');
    background-attachment: fixed;
    background-size: cover;
}

So I have a view area where it's big enough to see the image but will allow for the fixed effect. However, the image starts getting cut off at a width of 1180px. Do you think that is because the size of the image is large? Note that I'm also using Foundations and I know the medium scale starts at 1180px so that might have something to do with it as well.

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

try adding 

background-position:center;

could you also demo it on codepen?

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Nice! That keeps it centered when it does scale down so it looks a little better, but the picture is still getting chopped from the left and the right. I'm trying to put it into codepen now, but it's kinda difficult as I'm using PHP as well it's not working well :/

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

other way would be:

<img src="../img/service-pics/webdesign.jpg" id="bground">

#bground {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}

I would also try just min-height and min-width set to 100%?

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Good ideas, it's closer but still cutting off around 1000px width now. I'm still wondering if it's because it's the size of the image and it just can't shrink any smaller?

The weird thing is I have a picture on my main page that will scale all the way down to 300px width even though it's way bigger. That's why this isn't making much sense. Could it have something to do with not adding a certain class that relates to Foundation?

**PS - Maybe it's because the image on my main page is actually in the HTML instead of a CSS background-image? That's gotta be the difference why the main picture will scale all the way down right?

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

i'm not sure about Foundation classes... Never had this problem. try replacing min-width with max-width: 100%. in theory this should force it to fit the width of your browser right??

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Yeah you would think so... I'm really not sure why it's doing that.. It's not because of vendor prefixes is it? I'm using Chrome.

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

use chrome dev tools to see if your styles are being applied or overwritten

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

They are all being applied. Gotta love technology :) I'm sure it's one stupid little fix. Bah!

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Wait! I think I know what it is! It's because I have height set to 600px; because of that it probably stops scaling width wise when it can't get lower than 600px right? So how do I actually make the section visible without making it have a height? Any time I've tried a height in percent like height:60% it just collapses.

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

height of the image or your content section that sits on top of it? aghhhhh dude this is so hard to figure out without seeing your code (still good fun though!).

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Is there any other way I could send it without codepen? The challenge with "sharing" it so to speak is that I have everything split up into so many different files because of PHP for the HTML and Sass with the CSS.

Janek Rezner
Janek Rezner
12,973 Points
Janek Rezner
Janek Rezner
12,973 Points

if its live you could give me the link and i shall check it out in dev tools... ?

Guy Noda-Bailey
Guy Noda-Bailey
18,837 Points
Guy Noda-Bailey
Guy Noda-Bailey
18,837 Points

I'm not sure how they got that effect but it is very cool.

I know how I would do it, I'd just give that div an alpha of 0 

#divId {rgba(0,0,0,0)}

So that the background image of the body only shows through on that div.