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 Daniel Barone
Daniel Barone
1,630 Points

How can I make my website's logo overlap the other elements on my page?

In other words, how can I make it so that this image doesn't increase the height of its' parents div element, and instead rests on top of it.

I'm trying to put the logo at the top right of my page within the header.

3 Answers

Liam Linacre
Liam Linacre
Courses Plus Student 386 Points

You probably want to absolutley position your logo.

.logo {
    position: absolute;
    /* These are what you should change */
    top: 0;
    left: 0;
}

That code will position your logo relative to your window. Usually you would set the parent element to be position relative so you can position your logo relative to it's container.

If you show me the code i can explain the second bit better.

Nguy峄卬 Th脿nh C么ng
Nguy峄卬 Th脿nh C么ng
11,880 Points
Nguy峄卬 Th脿nh C么ng
Nguy峄卬 Th脿nh C么ng
11,880 Points

You can use background-image property in this case. :)

Daniel Barone
Daniel Barone
1,630 Points

http://imgur.com/7mdMuVf still hidden behind a navbar and breadcrumb div ):

Simon Morris
Simon Morris
16,250 Points
Simon Morris
Simon Morris
16,250 Points

use the background-size: contain; property that will fit the image into the container its in