1.11M Members

css background image don't show up

 
0
 

This is my CSS code

body{
background: white url(/image/bg.jpeg) repeat-x center top
}

HTML code

<!doctype html>  
<html>  
<head>  
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="style.css" /  
</head>  
<body>  


</body>  
</html>

I don't why but the image doesn't show up. The image for the background is below

http://img704.imageshack.us/img704/2162/67726065.jpg

Thanks in advance

 
0
 
body {background:#ffffff url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;}
<!doctype html>  
<html>  
<head>  
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>  
<body>  


</body>  
</html>
 
0
 
body {background:#ffffff url('http://img704.imageshack.us/img704/2162/67726065.jpg') repeat-x center top;}
<!doctype html>  
<html>  
<head>  
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>  
<body>  


</body>  
</html>

I have saved the image to a folder called image and when I call it up the background is not viewable.

I have tried the way above before and it has worked.

Thanks

 
0
 

Maybe you are not using the right path to the image. Try to use the absolute path, not the relative path. That means using www.domain etc

 
0
 

I have the same problem, my background image shows up in DW, but when I preview in the browser it does not show up.
I have attached a image of how it is shown in DW and in the browser.

I have tried to use absolute path, instead of relative. The background image does not appear at all then. I have tried many different other stuff found on forums all over. Just can't get it right.

Appreciate any help anyone could provide. I am very new to this, have tried to remove all comments and text, but there might be still some left, and a lot of unnecessary lines of code. Sorry about that, just don’t know what is relevant.

Here is the CSS code

@charset "utf-8";

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	padding: 0;
	text-align: center; 
	background-image: url(Images/Bakgrunn%20forste%20bl%C3%A5.jpg);
	background-repeat: no-repeat;
}

.thrColHybHdr #container { 
	width: 100%;		
	text-align: left; 
}  

.thrColHybHdr #header { 
		padding: 0 10px;  
} 

.thrColHybHdr #header h1 {
	margin: 0; 
	padding: 10px 0; 
}

.thrColHybHdr #sidebar1 {
	float: left; 
	width: 11em; 
	padding: 15px 0; 
}

.thrColHybHdr #sidebar2 {
	float: right; 
	width: 11em; 
	padding: 15px 0; 
}

.thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
	margin-left: 30px; 
	margin-right: 10px;
}

.thrColHybHdr #mainContent {
 	margin: 0 15em 0 15em; 
	padding: 0 2em 0 2em; 
} 

.thrColHybHdr #footer { 
	padding: 0 10px; 
} 

.thrColHybHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
}

/* Miscellaneous classes for reuse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

And here is the source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_askjesider.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>About this site</title>
<!-- InstanceEndEditable -->
<link href="Aksjesider.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css"> 
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body class="thrColHybHdr">
<div id="container">
  <div id="header">
    <h1><img src="Images/Logo-Kilde (transparent).gif" width="448" height="91" alt="Logo_trans" /></h1>
  <!-- end #header --></div>
  <div id="sidebar1">
  <h6>To insert a menu see chapter14 pluss pictures</h6>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  <!-- end #sidebar1 --></div>
    <div id="sidebar2">
    <h6>To add dynamic content and banners see part IV
  <!-- InstanceBeginEditable name="Sidebar2" -->
      <!-- InstanceEndEditable -->
    <!-- end #sidebar2 -->  </div>
  <div id="mainContent">
<!-- InstanceBeginEditable name="Main_content" -->
<h1></h1>
<h4><em></em></h4>
<p></p>

  <!-- end #mainContent -->
<!-- InstanceEndEditable -->
  </div>
  <br class="clearfloat" />
   <div id="footer">
    <h5><center></center></h5>
    <h5><center></center></h5>
    <h5><center></center></h5>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
<!-- InstanceEnd --></html>
Attachments Site_viewed_from_DW.jpg 77.59KB Site_viewed_from_EI8.jpg 166.87KB
 
0
 

I have the same problem, my background image shows up in DW, but when I preview in the browser it does not show up.

After trying a lot, I found that I have used a character only found in the Norwegian alfabeth in the image name. Now it works beautifully :) No wonder no other solution worked, have tried all there is :)

 
0
 

I have saved the image to a folder called image and when I call it up the background is not viewable.

I have tried the way above before and it has worked.

Thanks

Ohh yeah, while I'm here. Try removing the ' before and after the image file name Musafir. Noticed on my background image path that there are none of them, and it works beautifully.

 
0
 

This is my CSS code

body{
background: white url(/image/bg.jpeg) repeat-x center top
}

HTML code

<!doctype html>  
<html>  
<head>  
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="style.css" /  
</head>  
<body>  


</body>  
</html>

I don't why but the image doesn't show up. The image for the background is below

http://img704.imageshack.us/img704/2162/67726065.jpg

Thanks in advance

try this

body{
background: url(../image/bg.jpeg) repeat-x white center top
}
 
0
 

Hi,

I also had the same issue, It shows bg in Dreamweaver but not in preview browser. I found the solution:

Don't use numbers in the css!!

So I changed the #'s to letters like 4 to four and it worked!!!

 
0
 

i have the same problem ,but when i change the height of the css to a constant value it is going to work and the image appear but when i change it to auto it doesn't work ,why?

 
0
 

Because giving the div a style of height auto only makes the div as big as the contents of that div. If there is nothing in the div there is no height applied via auto.

To fix this apply (change the pixel size to fit your design)

min-height:100px;
max-height:200px;

since Jan 2013
•Unverified Member
 0 
1 Year Ago
i have the same problem ,but when i change the height of the css to a constant value it is going to work and the image appear but when i change it to auto it doesn't work ,why?

i have the same problem ,but when i change the height of the css to a constant value it is going to work and the image appear but when i change it to auto it doesn't work ,why?

You
Post:
Start New Discussion
Tags Related to this Article