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 Harry Woodford
Harry Woodford
1,865 Points

Float text on top of an image Inside my banner section

I've created a banner inside my header and inside it i've put

HTML

      <header>
      <div class="container group">
     <img src="images/picture.jpg">
     <h1></h1>
     <p></p>
      </div>
     </header>

CSS

header{
 background-image:url(../images/bg.jpg);
 height:800px;
 width:100%;
 background-size:cover;
 background-repeat: no-repeat;
 background-position: center;
 overflow:hidden;
}

==================================

but I want to place an image inside the container and group div. That's simple but I know how to align the text floating on one side and the image on the other side. But I actually want the image floating at the bottom center of the section with any <h1> or <p> tags also floating in the middle on top of the image. I can imagine z-index helps. but I've done that and it doesn't help or other stuff i've tried things fly out of place

HELP!!! :)

Konrad Pilch
Konrad Pilch
2,435 Points

Hi , can you please use this format

*```css

//Code

*```

and instead of css put int html and without the asterx . ANd put your code in these lines so we can see the code clear and so its there .

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The easiest way to accomplish what you're trying to do is to put the img tag after the text (h1 and p tags), and then set the div to have position: absolute (parent element would also need position: relative):

HTML

<header>
  <div class="container group">
    <h1>Heading</h1>
    <p>Paragraph text</p>
    <img src="images/picture.jpg">
  </div>
</header>

CSS

header {
  background-image:url(../images/bg.jpg);
  height: 800px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  position: relative;
}

.group {
  position: absolute;
  width: 100%;
  bottom: 0;
  margin: 0 auto;
  text-align: center;
}
Harry Woodford
Harry Woodford
1,865 Points

ok cool. I'll give it a go. thank you :)