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 Philip Stracener
Philip Stracener
Courses Plus Student 597 Points

Responsive background image with text position right of the center

Hello,

I have a large background png file and I need the title text to be to the right of the center of the image. It's simple in photoshop, but I'd rather use html and css to keep the headings as text instead of an image. I have searched for about 3 days now and have not found a solution. It is probably simple; I just cant figure it out. I am using bootstrap. Thanks,

1 Answer

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

I'm wondering if something about bootstrap adds some complication to this.

:point_right: Otherwise, I'd think applying "vertical-align: middle" to the image would do it.

Philip Stracener
Philip Stracener
Courses Plus Student 597 Points

Thank you for your response. When I add the "vertical-align-middle" the text doesn't move and I lose the responsiveness of the image. The "FirstName and LastName shows up in the upper left corner and is gray. I would like to have the text move to the right and about 100px towards the bottom.

html

<header>
    <div class="logo"></div>
    <nav>
      <a href="">About Me</a>
      <a href="">About Me</a>
      <a href="">About Me</a>
      <a href="">About Me</a>
    </nav>

    <h1>FirstName</h1>
    <h1>LastName</h1>
    <h1>for School Board</h1>

  </header>

CSS
header {
  height: 650px;
  background: url(../img/traceybooks.png) center center;
  background-size: cover;
}

h1 {
    font-size: 72px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

I managed to overlook the part about the image being background. OK, try this:

code.html 
  <div id="titletext">     <!-- new wrapper -->
    <h1>FirstName</h1>
    <h1>LastName</h1>
    <h1>for School Board</h1>
  </div>
style.css 
header {
  position: relative;
}
#titletext{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)
}
Philip Stracener
Philip Stracener
Courses Plus Student 597 Points

That worked! Exactly what I needed. It has been three days searching. Thank you so much for your help.

Philip