PDA

View Full Version : background image is not showing in html page from template


olanexhari
01-08-2010, 06:43 PM
hi all,

I m using dreamweaver templates to build website. I am using background image for one of Apdiv tag. problem is when i see template there is a background image but when i create new page from template there is no image. I am not sure what is the problem. here is code for both

code for template

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:793px;
height:114px;
z-index:1;
left: 185px;
top: 30px;
background-image: url(../newbg.gif);
}
#apDiv2 {
position:absolute;
width:789px;
height:1034px;
z-index:1;
left: -2px;
top: 116px;
background-color: #cbcbcb;
}
body {
background-color: #666;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2"></div>
<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reedhee</h1>
</div>
<!-- TemplateBeginEditable name="EditRegion3" -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- TemplateEndEditable -->
</body>
</html>


code for new page..

<!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/new template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:816px;
height:114px;
z-index:1;
left: 185px;
top: 50px;
background-image: url(file:///D|/my (file:///D%7C/my) website/newbg.gif);
}
#apDiv2 {
position:absolute;
width:789px;
height:1034px;
z-index:1;
left: 2px;
top: 115px;
background-color: #cbcbcb;
}
body {
background-color: #666;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2"></div>
</div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>



some one please help. i can see that image url is different in template and new page created from template. but i dont know what to do..

gentleone
01-08-2010, 07:31 PM
Before you start with a site in DW, you first have to define your site. This article explains how.

http://www.dreamweaverclub.com/dreamweaver-templates.php

olanexhari
01-08-2010, 08:23 PM
i have already done that...n i have uploaded copule of pages too,but now i want to use template so i dont need to work for each new pages..

gentleone
01-08-2010, 10:15 PM
i have already done that

Are you sure you didn't forgot something? Can you check what it says at the option 'Where on your computer do you want to store your files?'

DWcourse
01-08-2010, 11:13 PM
Dreamweaver doesn't update links within the background style property when creating a new page from a template.

So, when you use a background property in a style the resides in the template document, you must use a site root-relative link (in your case background-image: url(/newbg.gif);)

It's one more reason to use external style sheets.

olanexhari
01-08-2010, 11:53 PM
Hello Dwcourse,

Thank you very much,
I got your point. I think that is the reason image not showing up in new page.

still i need your a little more help.

can you please explain from the begining how to create external style sheet and link it to original template?

here is what i did.

i opened new css document and copy & pasted this code in it.

#apDiv1 {
position:absolute;
width:793px;
height:114px;
z-index:1;
left: 185px;
top: 30px;
background-image: url(../newbg.gif);
}

this code is from my original template (as you can see in my previous post) and it contains background image in apDiv tag.

then i saved it in my local website folder.

then i linked it at excatly same place on my original template where i want my apDiv tag with background image.

still its not working.

I would really appriciate your help. I am getting frustrated over this issue since i m trying it for last 2 daz without any result...

DWcourse
01-09-2010, 12:13 AM
the url of the image should be relative to the location of the style sheet. if both the image and the style sheet are in the same directory it should look like this:

background-image: url(newbg.gif);

And if the image is in the root directory, this would also work:

background-image: url(/newbg.gif);

olanexhari
01-09-2010, 06:28 AM
Thankyou very much DWcourse,

My problem is solved. Here is what i did.

i opened notepad and entered code for background image

then i saved it as a myimage.css file

then i created folder name CSS in my root directory and saved myimage.css in it.

then i created DW template and linked myimage.css in head section of it.

then i created div tag in body section and gave class name myimage

then i changed attributes of div tag like height and width.

and it worked... perfect...

thanks for yor help

DWcourse
01-09-2010, 02:38 PM
OK, but you could have done it all in Dreamweaver.