[SOLVED] Hi guys, wondering on backgrounds

nuddy · #1 Nov 16th, 2007, 15:46

Hi, I haven't been here for ages but I've got a job to do - my mate wants a website and I said I'd have a go! I really need to learn this!

I'm having problems at the very beginning really! My idea is to set an image as the background with a white box containing the welcom text and everything else - basically so that the image ends up looking like a thick border - like on this site - www.escapetoeden.com

This is my code so far, The image only appears in the header but when I try moving the code to the 'body' section, the image doesn't appear at all !!

Code: Select all

#header {

    font: 28pt century gothic,verdana,sans-serif;
    color:#FFFFFF;
    border:solid black 2px;
    padding:20px;
    background-image:url(/ushersdemo2/images/background.jpg);
    background-repeat:no-repeat;

}




#body {

     H1  { color:#FFFFFF; font-family: century gothic,arial; font-weight: 26pt };
     H2, H3, H4  { color:brown; font-family:Arial; font-weight:26pt };
     hr {color:navy};
     p {font-size:11pt; margin-left: 15px};
     a:link     {color:green};
     a:visited  {color:yellow};
     a:hover    {color:black};
     a:active   {color:blue};

}

I would appreciate any comments on how to resolve it so that the background is set like the example I gave.

Thanks in advance, I have looked at w3c school, there's so much to learn I don't know which section to look at, confused!!!

Kind regards
Louisa

karinne · #2 Nov 16th, 2007, 15:51

This

Code: Select all

#body {

     H1  { color:#FFFFFF; font-family: century gothic,arial; font-weight: 26pt };
     H2, H3, H4  { color:brown; font-family:Arial; font-weight:26pt };
     hr {color:navy};
     p {font-size:11pt; margin-left: 15px};
     a:link     {color:green};
     a:visited  {color:yellow};
     a:hover    {color:black};
     a:active   {color:blue};

}

is very wrong.

You don't put everything in #body { } like that just

Code: Select all

     H1  { color:#FFFFFF; font-family: century gothic,arial; font-weight: 26pt }
     H2, H3, H4  { color:brown; font-family:Arial; font-weight:26pt }
     hr {color:navy}
     p {font-size:11pt; margin-left: 15px}
     a:link     {color:green}
     a:visited  {color:yellow}
     a:hover    {color:black}
     a:active   {color:blue}

Have a look at some tutorials on HTMLDog... this is really basic css

Other than that ... we need a link.

nuddy · #3 Nov 16th, 2007, 15:58

Hiya

I know it's basic stuff, I am sort of new ie I know how to amend an existing site but I've never built one myself from scratch before so I really appreciate your help. The code I have so far looks like this following that amendment from Karinne, thanks for that (!) very embarrassing this!

http://www.writefresh.co.uk/ushersdemo2/home.html

As for htmldog, I'm going to head over there now. Why oh why do I set myself things like this!!!

L

karinne · #4 Nov 16th, 2007, 16:10

In the next version of Creative Coding - Webforumz's Newsletter - I have a tutorial on how to code a site from a to z

Check for it when December 1st rolls on

nuddy · #5 Nov 16th, 2007, 16:19

Fabulous, I'll check that one out. I've left it far too long to learn css properly!

Thanks Karinne

karinne · #6 Nov 16th, 2007, 16:25

No problem ... you got it working now yes?

nuddy · #7 Nov 16th, 2007, 16:48

Nope, but I've messed about with the text etc and got that styling right! The background doesn't want to work how I want it so I might just leave it and hope my friend likes..

!

karinne · #8 Nov 16th, 2007, 16:51

How is it suppose to look?!

This is what I get in

Firefox
FF.jpg

IE6
IE6.jpg

nuddy · #9 Nov 16th, 2007, 16:57

I wanted the image to show on the whole page, then to layer a white smaller image on top for text to go into. The logo where it is now - so basically the image would look like a thick border. When I looked before I posted I couldn't really find any advice, I think I've got the coding wrong (which isn't surprising). Once I get that, then the left navigation could layer on top of the image. Not the most complicated but I still don't quite know what I've done wrong!!

karinne · #10 Nov 16th, 2007, 16:58

Looking at your code and well ... you're missing a doctype, character encoding, title

This is usually what you should always start off with

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
</head>

<body>

</body>
</html>

That is the code for a basic HTML document.

karinne · #11 Nov 16th, 2007, 17:01

Quote:

Originally Posted by nuddy

I wanted the image to show on the whole page, then to layer a white smaller image on top for text to go into. The logo where it is now - so basically the image would look like a thick border. When I looked before I posted I couldn't really find any advice, I think I've got the coding wrong (which isn't surprising). Once I get that, then the left navigation could layer on top of the image. Not the most complicated but I still don't quite know what I've done wrong!!

If that's the case then instead of have that background property in the #header, just put in body { }

Code: Select all

body {
    background-image:url(/ushersdemo2/images/background.jpg);
    background-repeat:no-repeat;
}

#header {
    font: 28pt century gothic,verdana,sans-serif;
    color:#FFFFFF;
    border:solid black 2px;
    padding:20px;
}

H1  { color:#FFFFFF; font-family: century gothic,arial; font-weight: 26pt }

H2, H3, H4  { color:brown; font-family:Arial; font-weight:26pt }

hr {color:navy}

p {font-size:11pt; margin-left: 15px}

a:link     {color:green}

a:visited  {color:yellow}

a:hover    {color:black}

a:active   {color:blue}

nuddy · #12 Nov 16th, 2007, 17:20

Karinne, you simply are a star. I had tried deleting the code from the header and putting it in the body, only I know what I did wrong now and why it didn't work - I had put all of the elements (H1, H2 etc) in the body too. I see from your example, only the background image needs to go in #body {}.

Situation resolved and I can't believe you sorted this out for me, that is really kind. She (friend) will be extremely happy. I'll post when I'm finished and I can then get some feedback on how it looks.

THANK YOU THANK YOU THANK YOU !!!

karinne · #13 Nov 16th, 2007, 17:23

No problem

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
two backgrounds! can it be done?	christopher	Web Page Design	6	Mar 9th, 2008 11:20
web backgrounds	danny322	Graphics and 3D	3	Mar 7th, 2008 09:38
Hmm I Need Two Backgrounds !!	bruno89	Web Page Design	8	May 11th, 2007 14:26
Web Backgrounds	jimz	Graphics and 3D	12	Mar 8th, 2006 22:27
Just wondering what everyone uses to design their templates?	Galaxyblue	Graphics and 3D	9	Apr 10th, 2004 15:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Hi guys, wondering on backgrounds