CODEWITHSUNDEEP
cssimagetext
Spencer
Spencer

Reputation: 96

Text over Image CSS

I'm currently having issues with some CSS/HTML code.

http://codepen.io/anon/pen/bgHGn

I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.

I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?

I'm not sure if that makes any sense or is even possible.

Thanks!

Upvotes: 1

Views: 1406

Answers (3)

Adjit
Adjit

Reputation: 10305

you want to set the text-alignment property to center

.largeheader{
    position: fixed;
    margin: 0 auto;
    font-size: 100px;
    z-index:2;
    text-align: center;
    top: 50%;
    left: 50%;
}

The core issue being this isn't exactly in the center of the page,so as @RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.

Upvotes: 1

rcorrie
rcorrie

Reputation: 921

See the CSS code for the solution:

http://codepen.io/anon/pen/GqeBa

.largeheader {
     position: fixed;
     top: 50%;
     left: 50%;
     height: 100px;
     width: 250px;
     margin: -50px 0 0 -112px;
     font-size: 100px;
     z-index: 2;
}

Fixed positioning allows the element to stay put while you scroll the page.

Upvotes: 0

potterbm
potterbm

Reputation: 125

To get the large header horizontally centered you can use text-align: center; as @metsales suggested.

In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.

You'll end up with something like this:

.largeheader {
    line-height: 40px;

    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 0px;
}

To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.

Upvotes: 0

Related Questions