CSS - Background - Heavens Above

  The Paul 11:54 03 Mar 2004
Locked

Having been convinced that I should get to grips with CSS (Tarans love for them finally wears off on me) I have finally gone mad.

I have tried to understand the concept and application but no doubt have lost the plot (again).

Link is to a demo to try and see if I can get something going. There is a background which I have set in the Style and while it appears when I view the page in Dreamweaver, when I FTP it to my free space with Freeserve - there is no background.

Am I going mad - madder or just plain stupid!

Home page (index.htm) should have a parchment type effect background on left hand lower table cell. Click on Home should take you to another page which should have 2 sets of this parchment type background. click here

  Taran 13:59 03 Mar 2004

That's right, blame me.

Like it's all my fault...

;o)

To reference a background file in CSS this should be at the top of the CSS file or code block:

body, html {

background-image: url(foldername/filename.jpg);

}

This loads a background file called filename.jpg that is in a folder in your web root called images.

My first guess is that you haven't uploaded the image background tiles to your web root images folder or the folder/filename combination in the CSS file/code block does not point to the correct location.

  The Paul 14:21 03 Mar 2004

I've looked at the code (which of course Dreamweaver has set up - not thick me). I've pasted what I can see that looks close to what you mention. Do I enter the file location in the URL before the filename.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FDM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.fdm {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
background-image: url background3.gif.jpg);
letter-spacing: normal;
word-spacing: normal;
background-repeat: repeat;
visibility: visible;

  Taran 17:23 03 Mar 2004

OK, this is one of the areas where Dreamweaver lets itself down, in my opinion anyway.

Dreamweaver gave you this for your CSS:

<style type="text/css">

<!--

.background {

background-image: url(background.gif.jpg);

}

-->

</style>

You have two choices. Either you reference the .background CSS entry for the background of the page in the <body> tag, along the lines of

<body id=".background">

or

<body class=".background">

or, you change the CSS in the top of the document to this:

<style type="text/css">

<!--

body {

background-image: url(background.gif.jpg);

}


-->

</style>

A basic CSS layout breaks your page format into code blocks based on the page area, like this:

body {

contanis the background, font type, size, colour, borders, margins, blah, blah, blah

}

a:link { active hyperlink formt }

a:hover { mouseover hover formt for hyperlink }

a:visited { format of links you've clicked on }

h1 { heading 1 format }

h2 {}

h3 {}

h4 {}

h5 {}

h6 {}

td, th { table format }

You can add additional or custom classes or IDs based on requirements but the above is a very basic layout of the usual suspects in a CSS file.

Your problem is that a CSS code block in the head of the page is saying "use this background image file for the class/id called .background" but the class/id .background is not referenced in the <body> tag. Your table HTML says use the bgcolor="#56809E" - fair enough, but the body html tag is empty and Dreamweaver assigned a proprietary value to the background image you want to use instead of assigning it to a body {} CSS tag.

I hope I explained that in a way that you can understand.

The CSS value of

body {}

means that the

<body>

html will look for its formatting values in the body {} tags of the CSS file.

To use the tag Dreamweaver gave you, you have to say, "Hey, body tag HTML, listen up, I want you to use the css value of .background". You do this by referencing it as a class or id in the <body> tag, as I've listed above.

  The Paul 17:47 03 Mar 2004

I'll print all this off and take my existing one apart and rebuild as you have suggested.

Where do I send your fee?

  Taran 17:57 03 Mar 2004

One virtual glass of wine will be fine thanks.

Much more than that and I'm anybody's.

It's just a pity that nobody wants me...

sniff, sniff...


;o)

  The Paul 18:54 03 Mar 2004

You're loved here in Belfast - and from next month in France. I'm sending you a fine bottle of Margaux. Can I tempt you with anithing else.

I'll report back after my trip to Sainsbury's wine store.

  PurplePenny 21:09 03 Mar 2004

Does Mrs Taran know? :-)

  Taran 21:57 03 Mar 2004

That's how she got saddled with me in the first place, a move I'm sure she's regretted ever since...

;o)

  The Paul 22:27 03 Mar 2004

PurplePenny - I've just checked and I have a couple of extra bottles - does that do me any favours????

Taran - you magician - it worked. I'm messing about with a logo and I'll re FTP it later so that you can see your handy work in all its glory.

Was the wine ok?

  The Paul 23:15 03 Mar 2004

All was well and then I added a new logo and a navigation bar. You guessed it - totally belly up. The background just vanished I didnt touch the code or anything like it.

I have tried to rebuild the page from scratch and now I'm just seeing double.

I have tried all the code changes that you suggested and I cannot get any result at all. Arghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

These brilliant Lego posters show just what children's imaginations are capable of

Mac power user tips and hidden tricks

Comment réinitialiser votre PC, ordinateur portable ou tablette Windows ?