Centering text over a background image

Question

Trying to vertically & horizontally center the hgroup inside of the background image. Maybe I'm going about placing the image in the wrong manner. As you can see i've tried a variety of different methods. margin: auto, vertical-align: center, etc. are all not working.

I'm also trying to center the logo in the middle of the page, but still flush against the top.

Any help is much appreciated!

header img {
  margin: 0 auto;
  height: 167px;
  width: 177px;
}

.welcome {
  height: 650px;
  background: url(images/twotrees.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.welcome hgroup {
  vertical-align: middle;
}

.welcome h1 {
  color: #fff;
  font-size: 64px;
  vertical-align: middle;
}

.welcome h2 {
  font-family: kepler std;
  font-size: 48px;
  color: #fff;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  text-transform: none;
  vertical-align: middle;
}

<body>
  <header>
    <a href="/index.html"><img src="images/ttc_logo.png" width="177px" height="167px" alt="Two Trees Creative Logo"></a>
    <nav>
      <ul>
        <li><a href="index.html">Home</a> |</li>
        <li><a href="about.html">About</a> |</li>
        <li><a href="portfolio.html">Portfolio</a> |</li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <div class="welcome">
      <hgroup>
        <h1>Designing Your World</h1>
        <h2>One pixel at a time.</h2>
      </hgroup>
    </div>
  </header>

Attach some pictures to show what do you expect to get and what is the actual result you have! So I and others can help better. — Iman Nia, Apr 27 '17 at 00:54
I used @CharlieL suggestion of using Flexbox and it looks like it worked! Although I'm not sure if the same would work for centering the logo. Anyone know? — brandkast, Apr 27 '17 at 01:06
I think my question will help you http://stackoverflow.com/questions/43647758/responsive-image-with-an-overlay-text-stay-on-the-same-position. — , Apr 27 '17 at 02:57
looks like you did it!, did you just center background image? cause hgroup was fine and the background was not centered!. — Iman Nia, Apr 27 '17 at 10:27

score 1 · Accepted Answer · edited May 23 '17 at 12:02

If you can use flexbox, then that'll make your life a little easier. More on that here -> https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

If not, vertically centering w/o hardcoding the value can be a little tricky. I generally use the trick mentioned in this CSS Tricks post (https://css-tricks.com/centering-in-the-unknown/)

If neither of those are working for you, I'd suggest you take a look at this other question, as there are plenty of solutions to try over there How do I vertically center text with CSS?

score 0 · Answer 2 · answered Apr 27 '17 at 01:08

Looks like you came up with a flexbox solution to center the hgroup but here's another method using absolute positioning. It has better browser support than flex.

And to center the logo, just put it in an element with text-align: center

body {
  margin: 0;
}
header img {
  margin: 0 auto;
  height: 167px;
  width: 177px;
}

.welcome {
  height: 650px;
  background: url(http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  vertical-align: middle;
  position: relative;
}

.welcome, .logo {
  text-align: center;
}

.welcome hgroup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.welcome h1 {
  color: #fff;
  font-size: 64px;
}

.welcome h2 {
  font-family: kepler std;
  font-size: 48px;
  color: #fff;
  font-style: italic;
  font-weight: normal;
  text-transform: none;
}

<body>
  <header>
    <div class="logo">
      <a href="/index.html"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" width="177px" height="167px" alt="Two Trees Creative Logo"></a>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a> |</li>
        <li><a href="about.html">About</a> |</li>
        <li><a href="portfolio.html">Portfolio</a> |</li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <div class="welcome">
      <hgroup>
        <h1>Designing Your World</h1>
        <h2>One pixel at a time.</h2>
      </hgroup>
    </div>
  </header>

score 0 · Answer 3 · answered Apr 27 '17 at 02:06

0

If I am correct it appears that you are centering the logo inside of the anchor tag instead of the header tag. Try using the same code you have for the img but instead use the a tag. The hgroup looks fine. Hope that helps.

answered Apr 27 '17 at 02:06

Jonathan Cameron

1
2

score 0 · Answer 4 · answered Apr 27 '17 at 03:30

I think you need to use position property and its values static, relative , fixed or absolute. You can also use z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). I hope the following example may help you. For more information visit https://www.w3schools.com/css/css_positioning.asp and https://www.w3schools.com/howto/howto_css_image_overlay.asp.

USING POSITION PROPERTY

<body>
    <div class="container">
        <img src="https://images.pexels.com/photos/299231/pexels-photo-299231.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Notes">
        <div class="center">My Wishlist To Learn and Understand</div>
    </div>
</body>

</html>
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img {
    width: 100%;
    height: 5%;
    opacity: 0.6;
}
</style>

USING Z-INDEX

<!DOCTYPE html>
<html>

<body>
    <h1>This is notes will help me a lot</h1>
    <img src="https://images.pexels.com/photos/299231/pexels-photo-299231.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" width="100%" height="100%">
    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>

</html>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>

score 0 · Answer 5 · answered Apr 27 '17 at 10:22

0

Your hgroup is centered and looks find,the problem is the background image which is not centered.

You just need to center the background image.

answered Apr 27 '17 at 10:22

Iman Nia

2,255
2
15
35

Centering text over a background image

5 Answers5