Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Displaying a background image using CSS 3

    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 My code looks like this:

    Code:
    <!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.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,390
    Thanks
    11
    Thanked 295 Times in 294 Posts
    <!-- 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

  • Users who have thanked tracknut for this post:

    ipatch (09-11-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    <!-- 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •