CSS issue!

spenncerr · 3 Jan 2014 at 21:30

Hey guys,

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!

Tilluss · 4 Jan 2014 at 00:46

To get the large header to centre you need to specify a width so that the CSS knows what it's centering (I just added 'width:200px;' to largetheader to get it working) but I'm not sure what you mean by the rest.

tnx · 4 Jan 2014 at 01:06

Could the largeheader be put in it's own DIV then have the DIV set to auto centre.

maybe this will help.

http://www.youtube.com/watch?v=CFFHHelvs8c

I am not expert though. Just remember seeing this along the line.

cypto · 4 Jan 2014 at 01:10

Again hard to understand exactly what you are after, however here is something very quick that I believe does what your after.

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

Title at the top uses fixed to keep it with the page regardless of scrolling. Because of the fixed position we reset the position with "top:0px;"

HTML5 tag "main" used for holding all the text and is set to 60% so it fills 60% of the screen width. Margins are set to auto to keep the whole div centered.
Margin top set on "main" so it doesn't overlap the text. This is set at 150 pixels.

Background is set to the body as to cover the entire screen area this is best rather than making a separate div.