css background image don't show up

Question

Musafir 0 Newbie Poster

14 Years Ago

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

html-css web-design

7 Contributors
10 Replies
1K Views
3 Years Discussion Span
Latest Post 10 Years Ago Latest Post by travis.holt.921_2

travis.holt.921_2 0 Newbie Poster

10 Years Ago

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?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

StefanCP 0 Newbie Poster · Answer 1 · 2010-02-06T15:43:42+00:00

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>

Musafir 0 Newbie Poster · Answer 2 · 2010-02-06T16:04:10+00:00

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

StefanCP 0 Newbie Poster · Answer 3 · 2010-02-06T16:38:44+00:00

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

fido51 0 Newbie Poster · Answer 4 · 2010-02-15T05:37:45+00:00

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>

fido51 0 Newbie Poster · Answer 5 · 2010-02-15T10:54:10+00:00

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 :)

fido51 0 Newbie Poster · Answer 6 · 2010-02-15T10:59:15+00:00

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.

swarnali 0 Newbie Poster · Answer 7 · 2010-02-15T11:25:22+00:00

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
}

revo19 0 Newbie Poster · Answer 8 · 2011-08-20T11:42:26+00:00

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!!!

ehsanakbar 0 Newbie Poster · Answer 9 · 2013-01-21T08:13:49+00:00

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?