css percentages height and width

0
votes

I understand that in order for an element to be height 100% of the viewport the parent has to have a fixed height or for html and body to be height 100%.

My problem is I have an introduction title which I want in the middle of the screen, easy I thought, I will make a div 100% width and height then the user scrolls down to reach the rest of the content... Not so easy. For the div to be 100% height I need to make html height 100% but when I do that the gradient background repeats itself as it reads the height of the viewport (html 100%) and not the content.

The site is here.

Code: 

<div class="intro">
   <div class="intro_text">
        <h2><?php the_title(); ?></h2>
        <h3><?php the_date('Y'); ?></h3>
   </div>
</div>

<div id="content">
   <!--The user scrolls down to see this-->
</div>

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
background-color: #004000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ec448c), to(#5a94bc));
background: -webkit-linear-gradient(top, #ec448c, #5a94bc);
background: -moz-linear-gradient(top, #ec448c, #5a94bc);
background: -ms-linear-gradient(top, #ec448c, #5a94bc);
background: -o-linear-gradient(top, #ec448c, #5a94bc);
}

.intro {
width: 100%;
height: 100%;
}
4
htmlcss
Where is the background? - putvande

4 Answers

1
votes

You can do the negative margin trick:

.intro { 
    height: 200px; 
    width: 200px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

That will center the div in the viewport as long as all the ancestors don't have a position. The trick is that you position the div 50% of the viewport width and height away from the top left corner. Then you just use a negative margin equal to half the height and width of your .intro div in the top and left margins (this will center the div over the new center point).

Note: If you adjust the height and width, you should also adjust the negative margin (ex. if you change the width to 300, the negative left margin should be 150 - half the width) Also, this trick should work as far back as IE6, so no worries.

0
votes

I'm a little confused by you question but if you don't want your background to repeat, you could try

body { background:url(your_image.jpg) top no-repeat; background-position:fixed; }

0
votes

For fixing your background : Instead of applying your gradient to body, use another fixed element

div#mybackground {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background: ..gradient..;
}

Now, on your site you can do .intro_text { height:100%; } And then using JavaScript, set line height of .intro_text to same value as height of .intro_text, and add this to your h3 : 

.intro_text h3 {
  position:relative;
  top: -90%;
}

A better alternative to top -90% will be setting top to negative value of the height of .intro_text

0
votes

Set the background to the html and add a overflow: hidden to it. Then add a overflow: auto to the body.

Demo