1 reply [Last post]
nworbmit
nworbmit's picture
Offline
newbie
Oakland, CA
Last seen: 10 years 4 weeks ago
Oakland, CA
Timezone: GMT+8
Joined: 2012-04-30
Posts: 2
Points: 4

Hi

I'm fairly new to css.

I am looking for a 100% CSS way to have a full page image on a site.
That expands/contracts as the window is re-sized.
Like this one: http://ringvemedia.com/

But I need a 100px empty space at the top for a header.
I specifically do not want the full page image to hide behind the header.
I want the top of the image to start at the bottom of the header, not creep up behind it.

I've been plsying around with this stuff (http://css-tricks.com/perfect-full-page-background-image/)and then trying to put these into Divs to block off this 100px empty area at the top, but am not finding the right combination of sizing settings to make it work.

Starting from scratch, is there a way to do this?

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS Backgrounds and Borders Module Level 3

See CSS Backgrounds and Borders Module Level 3

example:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
      /*<![CDATA[*/
 
body {
  background-image: url("example.gif");
  background-position: 0 100px;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0;
  }
 
p {
  background-color: rgba(128, 128, 128, 0.5);
  color: white;
  }
 
#banner {
  height: 98px;
  padding: 1px;  /*blocks margin collapse*/
  }
 
h1 {
  text-align: center;
  }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="banner">
      <h1>test heading</h1>
    </div>
 
    <p>test sentence</p>
 
    <p>test sentence</p>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.