CODEWITHSUNDEEP
htmlcss
brandkast
brandkast

Reputation: 95

Centering text over a background image

Here's a link to the page.

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>

Upvotes: 1

Views: 4957

Answers (5)

Iman Rosstin
Iman Rosstin

Reputation: 2355

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.

Upvotes: 0

Carl Angelo Nievarez
Carl Angelo Nievarez

Reputation: 573

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>

Upvotes: 0

Jonathan Cameron
Jonathan Cameron

Reputation: 1

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.

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53684

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>

Upvotes: 0

Charlie L
Charlie L

Reputation: 463

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?

Upvotes: 1

Related Questions