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 mikey rizkalla
.a{fill-rule:evenodd;}techdegree
mikey rizkalla
Front End Web Development Techdegree Student 4,129 Points

How to get text inside header image

Hey guys,

Still fairly new to this and trying to put these tutorials into practice.

I am designing a demo website for my parents cafe but in the header I can't seem to figure out how to get the text to be displayed in the center of the header image. I appears above the image and I've tried to change it's display to inline-block and still no luck. I am trying to get the span element and the .main-logo to be centered in the .main-image. Here is the code. Thanks!

HTML <header> <span>CAFÉ</span> <img class="main-logo" src="img/logo.png" alt="lazio logo"> <img class="main-image" src="img/coffee.jpg" alt="espresso cup"> </header>

CSS

  • { box-sizing: border-box; }

.main-image { max-width: 100%; background-size: cover; }

header span, .main-logo { display: inline-block; }

3 Answers

Makenna Smutz
Makenna Smutz
5,444 Points
Makenna Smutz
Makenna Smutz
5,444 Points

Hey Mikey!

if you are trying to get "CAFE" in the center, you need to switch the <span></span> tags to a text tag. This is what I suggest:

<!-- HTML -->
<header> 
<h1 class="header-text">CAFÉ</h1> 
<img class="main-logo" src="img/logo.png" alt="lazio logo"> 
<img class="main-image" src="img/coffee.jpg" alt="espresso cup"> 
</header>

<!-- CSS --> 
.header-text {
  text-align: center;
<!-- This will give it the more website header feeling. -->
  padding: 50px;
}

I hope this works for you :)

Makenna Smutz
Makenna Smutz
5,444 Points
Makenna Smutz
Makenna Smutz
5,444 Points

p.s. it might also be a good idea to put your background image (coffee.jpg) in your CSS sheet! Like this:

.main-image {
  background-image: url('../img/coffee.jpg');
  max-width: 100%; 
  background-size: cover;
}

Just make sure that your picture is in the img folder in your project, and you change your HTML to reflect:

<header class="main-image" alt="Espresso Cup"> 
<h1 class="header-text">CAFÉ</h1> 
<img class="main-logo" src="img/logo.png" alt="lazio logo"> 
</header>
Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

If I understand what you want, the text-align property should do it:

header {
  text-align: center;
}
mikey rizkalla
seal-mask
.a{fill-rule:evenodd;}techdegree
mikey rizkalla
Front End Web Development Techdegree Student 4,129 Points
mikey rizkalla
.a{fill-rule:evenodd;}techdegree
mikey rizkalla
Front End Web Development Techdegree Student 4,129 Points

Thanks! Ya I was trying to put it as my background image in CSS but i forgot to add the apostrophes inside the url() so I try that again.