CSS - Background - Heavens Above

  The Paul 11:54 03 Mar 04
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 04

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 04

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 04

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 04

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 04

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 04

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 04

Does Mrs Taran know? :-)

  Taran 21:57 03 Mar 04

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 04

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 04

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.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…