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

HTML

Posted by Jeffrey Bulman
Jeffrey Bulman
Courses Plus Student 1,747 Points

Bring text to front of image

Just started a new website template added a background image and all the text is behind the image. How do i bring everything to the front. Probably something simple but i cant seem to figure it out.

Hugo Paz
Hugo Paz
15,622 Points

Could you please post your code here?

2 Answers

Jeffrey Bulman
Jeffrey Bulman
Courses Plus Student 1,747 Points

Right, i have managed to fix the issue. After trawling the interweb i came across the z-index: -1; tag. I still dont know what it represents or how it can be used or what it has done to bring the text to the front, so if anyone could explain it would be much appreciated.

Hugo Paz
Hugo Paz
15,622 Points

z-index is the element position in the z axis. Imagine a stack of books. The book at the bottom has a z-index of 0, the one right on top of it has a z-index of 1 and the one on top of it a z-index of 2 and so forth. The thing to remember is that you can have negative z-indexes. Basically you put a book under the bottom one, it would be z-index -1.

Jeffrey Bulman
PLUS
Jeffrey Bulman
Courses Plus Student 1,747 Points
Jeffrey Bulman
Jeffrey Bulman
Courses Plus Student 1,747 Points

HTML - img src="img/background.jpg" id="bg" alt=""

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

Hugo Paz
Hugo Paz
15,622 Points

Jeffrey,

You are setting your background image directly as an image element. It would be easier to help if you posted the full html. What you can do is set your image background to the body like so:

body{
background-image: url('img/background.jpg');
}

Remember to remove the img tag from your html.