ansaurus

Question

How to make CSS - angles-image + background? And height - 100% or auto?

Answer 1

A:

You could do that with some creative uses of the background property on your various elements:

<html>
  <body>
     <div id="content">
        Your content
     </div>
     <div class="corner right"></div>
     <div class="corner left"></div> 
  </body>
</html>

Then the CSS would be as follows:

/* Following 2 rules create min-height 100% for your content and body */
html,
body {
  height: 100%;
}

#content {
  min-height: 100%;
}

/* html and body create the fixed position bottom right/left corners */
html {
  background: url(bottom-right.png) no-repeat fixed 100% 0;
}

body {
  background: url(bottom-left.png) no-repeat fixed 0 0;
}

/* top right/left corners are handled by 2 divs */
.corner {
  position: fixed;
  top: 0;

  width: 50px;  /* width of your background image corner */
  height: 50px; /* height of your background image corner */    
}

.left {
  left: 0;
  background: url(top-left.png) no-repeat 100% 0;
}

.right {
  right: 0;
  background: url(top-right.png) no-repeat 100% 0;
}

Pat 2010-09-08 13:17:28

ansaurus

tags:

views:

answers:

How to make CSS - angles-image + background? And height - 100% or auto?

related questions