Question

so i have my index.html and a canvas.css

body{
}
#canvasHIPPO{
 display:block;
 margin:0px auto 0px;
 width:100%;height:100%
 background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}

in my index.html:

<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>

I would like to know how to:
1) center the canvas ontop of the background city image, despite 2) different screen sizes and/or 3) maintain the same aspect ratio.

I was pretty sure the margin:0,auto should have fixed the (1) and centered the canvas ontop of the background image…what am i missing?

Thanks!

Answer 1

Are you trying to centre the image horizontally or vertically?
If you are centring it horizontally, in your css it should be:

#content {
    background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}

#contentHIPPO {
    margin: 0 auto;
    display: block; 
    width: 800px;
    height: 600px;
}

and in your html:

<div id="content">
    <div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

This will cause the div to be centred horizontally, with the image repeating in the background. If you want the image to be re-sized to the browser window, you would need to use javascript to get the size of the window.