Centering content in a div with a parallax background

HTML & CSS
1

I’m using Stellar.js to create a parallax background. Within that div that that contains the backgound, I’ve got another div that contains some content. This content should be centered horizonatlly and vertically, but I can seem to get that to work.

<div class="parallax" id="parallax1">
<div class="parallax-content">
<p>Title here</p>
</div>
</div>

The styles for this are:

.parallax {
    background-attachment: fixed;
    height: 400px;
}
#parallax1 {
    background-image: url("img/photo.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.parallax-content {
    width: 100%;
    padding: 0px 20px;
    margin: 0 auto;
    vertical-align:middle;
    text-align:center;
    height: 400px;
}

.parallax-content p{
    font-size: 72px;
    color: #fff;
    text-shadow: 0 1px 0 #424242, 0 0 5px #424242;
    font-family: Roboto-Bold, sans-serif;
    text-decoration: underline;
}

I’m finding that my content is centered horizontally, but is top aligned. Further more it’s actually pushing down the parallax background creating white space above the background.

I’m sure there is something basic that I’m doing wrong.

2

I trust that you are setting heights for a good reason? The easiest way is to add in this code.

#parallax1
{
  width:100%;
  display:table;
}
.parallax-content
{
  display:table-cell;
}
3

If I remove the heights, then your solution works.

The problem is that without the heights then the container parallax1 .parallax is only the size of the content. I need it to be much larger than that (in height).

The only other way I could think about doing it is adding a massive padding to the parallax-content, which doesn’t seems like a good solution.

Is there another way to control the height of the background?

4

I mean if you make the image 400px tall then set no-repeat, that’s controlling the visual aspect of it.

5

The image is 1155px heigh, but since its a background image then surely it’s height is dependent on that of the content over the top of it?

Do you mean change:

#parallax1 {
background-size: cover;
}

and instead set a specific pixel value? Bear in mind I want the background to cover the full width of the screen/device

6

If you are trying to center the content inside the 400px height then Ryan’s solution will do that.

I think we may need to see a demo as there is probably more to this than meets the eye :wink:

1 Like
7

OK I’ve quickly thrown it up at http://carey.is/testing/

Ignore the placehold.it images, they obviously aren’t 250p wide.

Always easier when you can see the everything together.

8

Hi,

Thanks for the demo can you just run through which bits are wrong and need attention :smile:

I assumed that you wanted a height of 400px on .parallax-content and that would allow the text you enter to be vertically centered in that height.

.parallax-content { height: 400px;}

However, I think that perhaps you mean something else?

9

No you are right. Thanks.

I did want a height of 400px. I removed that earlier because I couldn’t get the centering to work. In the end I think it was margin and padding on p element in the style sheet. I moved the typography styles up in the sheet before uploading the test page.

Thanks for the help everyone.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.