Q. I’ve just been tinkering around with HTML5 and generating a nice radial gradient fill background that takes up 100% width and height of my browser. I’m now wanting to place a normal <div> layer over the top of my <canvas> command. Is there a simple way to do this in CSS?

A. If you want something like this:

 

Here’s the code:

The CSS looks like this:
{code type=css}
<style type=”text/css”>

body{overflow-x:hidden;
color: #fff;
background-color:#<?php echo ($c1); ?>;
}

div.container{
margin: 0 auto;
padding: 0;
width: 100%;
}

div.wrapper {
left: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}

div.adjustmiddle {
margin: 0 auto;
width: 960px;
}

div.content{
background-color: #555;
}

#canvas1{
margin: -8px;
}

</style>
{/code}

 

And the HTML looks like this:
{code type=html}



Fallback content

Look at my mum!

{/code}

0 comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>