1,105,447 Community Members

css background image don't show up

Member Avatar
Musafir
Newbie Poster
21 posts since Nov 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
StefanCP
Newbie Poster
10 posts since Oct 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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>
Member Avatar
Musafir
Newbie Poster
21 posts since Nov 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
StefanCP
Newbie Poster
10 posts since Oct 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
fido51
Newbie Poster
3 posts since Feb 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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
Member Avatar
fido51
Newbie Poster
3 posts since Feb 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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 :)

Member Avatar
fido51
Newbie Poster
3 posts since Feb 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
swarnali
Newbie Poster
2 posts since Feb 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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
}
Member Avatar
revo19
Newbie Poster
1 post since Aug 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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!!!

ehsanakbar
Newbie Poster
1 post since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
Unverified Member
 
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?

Member Avatar
travis.holt.921_2
Newbie Poster
11 posts since Sep 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
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