Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css background not working ?

Status
Not open for further replies.
sharkchaser

sharkchaser

Technical User
Mar 19, 2010
50
US
Here is my css page

All is working except the background-image part.
I've doubled checked the path and image name, etc. and it's all correct.

Is it in the head, style, body portion?

I VERY new at this using DW CS4.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css" media=all>

body
{background-color: #FFFFFF
background-image:url(/"Images/WeaverBk.jpg") ;}


p {text-align: right; color: teal;font-size: 1.6em;
	}

a {color: blue; font-size: 1.6em;
	}
	
h1 {color: #069; font-family: "Times New Roman", Times, serif;

}


h2 {color:#069; font-family: "Times New Roman", Times, serif;
		
}

h3 {color:#069; font-family: "Times New Roman", Times, serif;
		
table
{ 
margin-left: auto;
margin-right: auto;
}		

</style>
</html>

Thanks

Rick
 
Sort by date Sort by votes
Do you have a body in your page?
Code: 
...
margin-right: auto;
}        

</style>
[blue]
<body>
<p>This is where stuff goes.</p>
</body>
[/blue]
</html>

also the stylesheet should be in your <head> section, not after it:


Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Thanks Greg.

margin-right:auto; This affects the table I thought?

Moved the style sheet to the head section.

placed a "}" at the end of h3. It was missing.

All said and done there is still no background image showing.

I need this to show so I can determine how best to set up the pages.

Thanks Greg.

Rick
 
Upvote 0 Downvote
The error is in the path:

Code: 
background-image:url(/[COLOR=yellow red]"[/color]Images/WeaverBk.jpg")

Unless you have a folder who's name starts with a double quote, that's never going to work.
Move the double quotes behind the slash
Code: 
background-image:url([COLOR=yellow red]"[/color][blue]/[/blue]Images/WeaverBk.jpg")



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
I still can't find the problem.

I made countless adjustments incorporating the suggestions provided and triple check paths and everything I can think of.

The background image does not show on any page.

It is a valid jpeg file.

Isn't the background image supposed to be behind everything on all html pages that are linked with the css file?

Here is my css file again.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media=all>
</head>

<body>

	{background-color: #ffffff
		background-image:url("/pwsinternetsite/WeaverBk.jpg") ;}

p {		text-align: right; color: teal;font-size: 1.6em;

}

a {		color: blue; font-size: 1.6em;

}

h1 {	color: #069; font-family: "Times New Roman", Times, serif;

}


h2 {  color:#069; font-family: "Times New Roman", Times, serif;
		
}

h3 {  color:#069; font-family: "Times New Roman", Times, serif;

}
		
table

{ 
	margin-right: auto;
	margin-left:auto;
}		

</body>
</html>

Thanks much all.

Rick
 
Upvote 0 Downvote
So many things wrong with that code...
Try this:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media=all>
body {
  background-color: #ffffff;
  background-image:url("/pwsinternetsite/WeaverBk.jpg");
}
</style>
</head>      
<body>

Body content here
</body>
</html>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Phil AKA Vacunita . . .

I made an completely new css page copied entirely from your suggestion and href that into the html page.

background image still fails?

All other attributes work well.

I can't figure it out.

Thanks

Rick

 
Upvote 0 Downvote
Not sure what's happening then. The code above works for me assuming there's an image called WeaverBk.jpg in a folder named pwsinternetsite. The folder is inside he same folder as the html file that holds this code.

Now if you are including a CSS file with the styles instead of having them directly in the HTML file then it should look something like this:

Code: 
body {
  background-color: #ffffff;
  background-image:url("/pwsinternetsite/WeaverBk.jpg");
}

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<LINK rel="stylesheet" media="all" href="mystyles.css" type="text/css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>      
<body>
Body content here
</body>
</html>

Where is the CSS file in regards to the html file?
Where is the image in regards to the html and CSS file.

Lastly is Dreamweaver converting the paths to something else?

Whether or not Dreamweaver can load the image, load the html file in a browser and see if it works.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Before I go any further lets look at my folder structure.

This is how I originally set this up.

C:\PWSInternetSite (The root folder?)
SubFolder C:\PWSInternetSite\HTML
SubFolder C:\PWSInternetSite\HTML\Images

I first tried having the images in the image file. Failed.

Then I placed the html, css and image ('WeaverBk.jpg') all in the html folder. Failed.

Next I placed them into the PWSInternetSite folder. Failed!

I'm at a total loss here.

Thanks.

Rick
 
Upvote 0 Downvote
BRAND NEW DW CS4 HTML PAGE!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

I'm often asked by builders and developers to develop gray market studies to determine real estate markets in any given area. Over the past 16 years we've streamlined this method that starts with a chart similar to the one shown below. It's a small part of how we demonstrate to builder/developers where the market is and how to strategically set competitive price-point positioning for their product. (We also use this for absorption rate pricing.) 

This has proven so successful that we've ported it over to our residential real estate sales business. Seeing the entire presentation in person makes you appreciate how we transform the mounds of data into a simplistic easy to understand presentation focusing on one objective, to set a competitive price-point position for your home. This method was primarily designed for large custom homes and custom lot sales but works well with tract homes. We think it's pretty cool! Remember the chart you use must be from the area where the subject property is located. We charge builder/developers thousands for this analysis. Clients of Properties With Style, Inc. pay nothing! And by the way, when representing buyers using this method to substantiate their offers we almost always get our price, or very near to it. 

In looking at the "UNIT SQUARE FEET" scale located at the bottom of the chart, locate the square foot size of your home or the home of your dreams. On an imaginary vertical line where it intersects either SOLD SFR or Condo curve lines, look to the left or right side of the chart to find the dollar scales. This will indicate an approximate value of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique and each specific analysis is far more complex. Data is based on a specific city or area and time frames as noted on the charts. If you have questions or would like a custom detailed analysis for your home or a home you're thinking of purchasing, please contact us at 949.637.7560 or E-mail us at: PWStyle@cox.net. 

</body>
</html>



BRAND NEW DW CS4 main.css page.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
<style type="text/css" media=all>

body
{background-color: #FFFFFF
background-image: url(/Images/WeaverBk.jpg) ;}

</style>

</body>
</html>

The text displays fine in Opera and IE 8 but NO BACKGROUND IMAGE!!!

Two day on this and nowhere!

H.E.L.P. . . .

Rick
 
Upvote 0 Downvote
Your external css file should not have html tags in it. It should simply have css. This is a correctly formed (external) css file:
Code: 
body
{background-color: #FFFFFF
background-image: url(/Images/WeaverBk.jpg) ;}

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Hi Greg,

Does that mean there should be no </html>, </body>, or </head> tags in the css file?

I'm sorry to be so lame on this but there is so much conflicting Internet information on how to construct html and css, it's very frustrating.

I can successfully set font attributes and such and even set images on an html page but for three days now I still cannot get a background image from an external css stylesheet to show up in a html page.

Thanks Greg.

Rick
 
Upvote 0 Downvote
I GOT IT! I GOT IT! I GOT IT! (background-image)

Thanks to all of you who have struggled with me to get this completed.

Now I can move forward and present you with even more challenging obstacles.

Thanks again.

Rick
 
Upvote 0 Downvote
Hi please post your solution, my guess would have been
Code: 
body {
background-color: #FFFFFF;
background-image: url(Images/WeaverBk.jpg);
}

Cheech

[Peace][Pipe]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cohan123
  • Locked
  • Question
Hypertext Jump function not working
Replies
0
Views
191
cohan123
cohan123
brk1221
  • Locked
  • Question
Preview in browser - no css
Replies
3
Views
103
spamjim
spamjim
HansKok
  • Locked
  • Question
Error after only changing text and not codes
Replies
0
Views
185
HansKok
HansKok
Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
242
Mike Lewis
Mike Lewis
LyndonOHRC
  • Locked
  • Question
Javascript code will not execute if a cfdocument tag is in my document
Replies
1
Views
120
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top