HTML CSS Background-Image Help!!!

dwarfdude77

In Runtime
Messages
270
Location
USA
Hi guys, I am making this website to practice with HTML and CSS before I teach a bit about it to a few of my peers, anyway, I'm having some problems with the background-image css property for the body. The image does not show up??? Please help!!
 
Here is code:

HTML:
Code:
<html>
	<head>
		<title> Countdowns | Welcome! </title>
		<link <link rel="stylesheet" type="text/css" href="indexstyle.css">
		
	</head>

	<body class="bg">
		<div class="body">
			
		</div>	
	</body>




</html>

CSS:
Code:
img.background{width:100%;color:blue;}
body.bg{background:("bg.jpg");}
 
You need to use the 'url' specifier in the background-image tag.

Code:
body.bg { background-image: url('bg.jpg'); }

That's assuming bg.jpg is in the same folder as your HTML file(s).
 
Thanks! That worked!


Another problem dealing with javascript:

Javascript code:
Code:
<script> 
			fuction (){
				
				var image = document.getElementById('button');
    
    			if (image.src.match("b.png")) {

        			image.src = "b.png";

   				 } else {

       				 image.src = "bmo.png";

   						}	 
				}
 		</script>

It says for an error: "Uncaught SyntaxError: Unexpected token { "
 
Wow... can not believe I did that...

Now it says that there are no errors, but it does not change when I mouse over it.

Here is all the HTML and Javascript
Code:
<html>
	<head>
		<title> Countdowns | Welcome! </title>
		
		<link <link rel="stylesheet" type="text/css" href="indexstyle.css">
		
		<script> 
			function changeImage(){
				
				var image = document.getElementById('button');
    
    			if (image.src.match("b.png")) {

        			image.src = "b.png";

   				 } else {

       				 image.src = "bmo.png";

   						}	 
				}
 		</script>
		
	</head>

	<body class="bg">

		<div class="spacer2"></div>

		<div class="spacer">
			
			<p class="introduction">
				
				<b> Welcome to Countdowns </b> 
				
				<br> 

				<i> Wait in Anticipation of the Future </i> </p>
		</div>

		<div class="body">
			
			<a href=""> <img id="button" onmouseover="changeImage()" src="b.png"> </a>
		
		</div>	
	
	</body>

</html>
 
Isn't the console object already built into Chrome? I use it all the time.


Sent from my iPhone using Tech-Forums
Yeah. Developer tools are in the 3 major browsers by default now and all can be accessed from pressing F12 on the keyboard. Not sure about Opera, as I don't use it.

Sent from my HTC One
 
Last edited:
Back
Top Bottom