I've told the HTML editor to set a background image with no-repeat and centered. I then save the HTML file locally.
If I open the local HTML file in my browser, my image displays as I would like / expect. BUT when I upload the HTML file to the web and open it, the image is centered ok horizontally, but appears to be going off the top of the screen.
This is the code generated by the editor:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Thu, 18 Jul 2013 07:25:56 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Why doesn't this work?</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#000000;
background-image:url('myimage.png');
background-position:center center;
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Thu, 18 Jul 2013 07:25:56 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Why doesn't this work?</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#000000;
background-image:url('myimage.png');
background-position:center center;
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
