...

View Full Version : Displaying a background image using CSS 3



ipatch
09-11-2011, 10:22 PM
I have created a simple HTML document, bluemoon.html I am trying to display a background image using CSS 3, but I am having difficulty displaying the image. I have tried several different code examples, but the most recent one I am modeling my example from happens to be this (http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background-size2) My code looks like this:



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en>
<head>
<meta http-eqiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blue Moon Wordpress Theme</title>

<style type="text/css">

<! -- CSS code goes here -->

@charset "utf-8";

div
{
background:url(http://ipatch.penguinmilitia.net/wp-content/uploads/2011/09/coffee_mech.png);
background-size:100% 100%;
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-repeat:no-repeat;
}
<!-- image dimensions 1101x1326 -->

h1
{
font-family:"Helvetica";
}
</style>
</head>
<! -- END OF HEAD -->
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>


With the above mentioned code FF 6.0.2 is not displaying the background image.

tracknut
09-11-2011, 10:45 PM
<!-- comment --> (note no space after !) is an html comment, and doesn't work in CSS. So replace those with /* comment */ and see if that works.

Dave

ipatch
09-11-2011, 11:20 PM
<!-- comment --> (note no space after !) is an html comment, and doesn't work in CSS. So replace those with /* comment */ and see if that works.

Dave

thank you so much, that is getting me a step closer.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum