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!

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 CSS Layout Techniques Float Layout The Float Clearfix

Joey Halderman
Joey Halderman
569 Points

Text centered above image

How do make the text appear above the image. Similar to the grid on this page.


2 Answers

James Barnett
James Barnett
39,199 Points

If I were going to try to do that I'd probably just use a grid. However if that doesn't work check out table and table-cell CSS properties.

Joey Halderman
Joey Halderman
569 Points

How do I get the text to center over the background? Almost as if it is a layer above the image.

For most folks the easiest way to do this is setting the image to the background of an HTML element in CSS. But in your HTML, your headline element or paragraph or both are child elements of the div that has the background.

It would look something like this:

<div class="background">
    <H1>Stay Connected</H1>

And then you would add a background image to the class background in CSS.

    Height:250px;/* whatever you want*/
    Background-image: URL("path_to_image_here/image.jpg");

text-align: center;

Now this will get you started but its up to you to clean it up. When you add images to the background in CSS, they have no reference to the box model flow in HTML. Basically, HTML doesn't know that the image is there at all. The only thing it does know is there's a div there with the class of background. This is why I gave .background a width and height because if you didn't, the box would collapse on the content and only show an image behind the H1. Its up to you to figure out how Mich image you want to show behind the text and then adjust height or my favorite, add just margins around the h1 to stretch out its parent element thus showing more picture which is a better way because it keeps it partially responsive.

The choice is yours. I hope that helps.