css background image don't show up

Question

Musafir 0 Newbie Poster

16 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

Thanks in advance

graphics:image html-css web-design

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

Dani AI

Generated 10 Months Ago

Brief, practical primer that consolidates what happened in this thread and the checks that actually fix most “background image not showing” cases.

The original post by contains a malformed stylesheet link (the link tag is not properly closed), which will prevent the browser from loading any CSS. Other common causes seen here: root-relative vs. stylesheet-relative paths (leading slash points to site root), case-sensitivity on servers, spaces or non-ASCII characters in filenames (as found), and differences between Dreamweaver preview and serving the site over HTTP. and were right to focus on path and link issues; note that ’s “avoid numbers” claim is not generally applicable — CSS selectors cannot begin with a digit unless escaped, but filenames may contain digits.

Concise troubleshooting checklist (in order): confirm the stylesheet is actually loaded (DevTools Network shows style.css with HTTP 200); inspect the element and check the computed background-image URL; try opening the image URL directly in the browser to see 404/permission errors; remember that relative URLs in CSS are resolved relative to the CSS file location, not the HTML; rename files to simple ASCII names (avoid spaces / accented characters); test on a local HTTP server rather than file:// to avoid root-path surprises.

Practical quick steps to reproduce a real hosting environment and a safe CSS example:

# run a simple local server from the project folder
python3 -m http.server 8000

/* keep filenames simple; paths are relative to the CSS file */
body {
  background-color: #fff;
  background-image: url("assets/bg-image.png");
  background-position: center top;
  background-repeat: repeat-x;
}

If the stylesheet is not loaded, fixing the link tag or server setup is the real remedy; background shorthand and quote styles are rarely the root cause.

All 10 Replies

travis.holt.921_2 0 Newbie Poster

12 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('') 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('') 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 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

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?

css background image don't show up

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers