17 replies [Last post]
dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

I need to move this from html to css so my webpage will be xhtml 1.0 strict.

<body background="images/angel.png">

here is my css.

<style type="text/css">{  }
body {
      
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:16px;
     color:rgbrgb(0,0,0);
 }

h4 {
     margin:0px;
 }

#container {
     background-color:transparent;
     border:0px solid;
}

#header {
     background-color:transparent;
     border-bottom:0px 
     height: 60px;
     text-align:center;   
 }

#leftcolumn {
     float:left;
     background-color:transparent;
     height:450px;
     width: 25%;
     text-align:center; 
     padding-top:2px;  
 }

#centercolumn {
     float:left;
     background-color: transparent;
     height:450px;
     width: 50%;
     text-align:center;  
     padding-top:2px;  
     overflow:auto;
 }

#centercolumn p {
     text-align:justify;
     margin:20px;
 }

#rightcolumn {
     float:left;
     background-color:transparent;
     height:450px;
     width: 24.9%;
     text-align:center;   
     padding-top:2px; 
 }

#footer {
     clear:both;
     background-color:transparent;
     border-top:0px;
     height: 60px;
     text-align:center;   
 }

-->
</style>


Here is a link to my website so you can see what I am trying to do.

http://www.geocities.com/dvdljns/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

body-background in css

Then you need to code this:

body {
     
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:16px;
     color:rgbrgb(0,0,0);
     background: url(images/angel.png); <<but check your paths
 } 

Anymore than that and you will need to explain a little about your requirements.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

body-background in css

Just add

Background: url(images/angel.png) 0 0;

In the body selector.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

body-background in css

inline styling is okay to use even in xhtml, but the format is like this:

<body style="background: url(images/angel.png)"

or to move it to your stylesheet (remove background from html) add this to your body rule

background: url(images/angel.png);

Now for some other errors:

you're missing the opening <html> tag,
you have two <body> tags,
you have an image tag after the </html> tag - in needs to be inside the body.

Edit: xposted with briski

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: body-background in css

dvdljns wrote:

body {

font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:rgbrgb(0,0,0);
}

Can you use RGB values in your CSS like this? How widely supported is it?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Re: body-background in css

Tyssen wrote:
dvdljns wrote:

body {

font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:rgbrgb(0,0,0);
}

Can you use RGB values in your CSS like this? How widely supported is it?
No, the syntax is wrong. It should look like this:
color:rgb(255,102,0);

You can also do percents:
color:rgb(100%,40%,0);is the same as color:orange;orcolor:#f60;

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

body-background in css

Do all browsers support it? Is there any advantages/disadvantages of using RGB over hex values?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

body-background in css

Tyssen wrote:
Do all browsers support it? Is there any advantages/disadvantages of using RGB over hex values?
As far as I know, yes. (do not quote me on that)

Advantages? I guess it's just another option. Maybe if you are given rgb values instead of hex by a client it would be peachy to use it instead of trying to convert it to hex.

dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

body-background in css

yep! I got two rgb. worked all last night by the time I did this, it's no surprise.

had no problams using. rgb 0,0,0.

dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

body-background in css

It did not work. lost the bakground.Take a look.

http://www.geocities.com/dvdljns/

dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

body-background in css

wolfcry911 wrote:
Now for some other errors:

you're missing the opening <html> tag,
you have two <body> tags,
you have an image tag after the </html> tag - in needs to be inside the body.

Edit: xposted with briski

Where cannot find them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

body-background in css

Most of those errors are Geocities errors, don't worry about them.

For some reason, you have this:

< href="http://www.geocities.com/dvdljns/images/" target="angel.png">

in your head section. Why?

Your syntax is wrong. This is right:

background: url(http://www.geocities.com/dvdljns/images/angel.png) 0 0; 

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

body-background in css

Background: url(<"http://www.geocities.com/dvdljns/images/"angel.png">) 0 0; 

should be

Background: url(http://www.geocities.com/dvdljns/images/angel.png) 0 0; 

You should not have the < or > and there is no need for the quotes either.

[edit] cross posted with TPH but you could use this more relative path I imagine

Background: url(../images/angel.png) 0 0; 

[/edit]

dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

body-background in css

Ok! heres what I did.

I got this where it will valadate.

 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">
<head>
  <title>3col</title>
   <meta name="Description" content="a three column web page" />
  <meta name="Author" content="dvdljns" />
  <meta http-equiv="Content-type" content='text/html; charset="UTF-8"' />

  <style type="text/css">
     
        @import url(style/3col.css);  
  </style>
</head>
<body>
 <div id="container">
<div id="header"><h4>This is my header.</h4></div>
<div id="leftcolumn"><h4>This is my left column</h4></div>
<div id="centercolumn">
<h4>This is the center column.</h4>
<p>
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti 
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. 
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
 nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt 
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a, 
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing, 
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.</b>
</p>
<p> 
<b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed 
cursus feugiat mauris. Aenean pharetra purus a augue varius gravida. Aliquam gravida nibh ut nunc. 
Integer tortor risus, posuere eget, rutrum non, semper a, tellus. Phasellus faucibus, elit nec egestas 
adipiscing, sapien sapien lacinia nulla, et bibendum metus neque fermentum sapien. Etiam ante dui, 
tincidunt ac, auctor eu, aliquet non, velit. Mauris enim libero, malesuada at, dignissim vitae, lobortis ut, 
enim. Sed porttitor consequat eros. Morbi nec risus vitae diam sodales accumsan. Praesent ultrices
 magna sit amet enim. Proin convallis ipsum non dolor. Donec eu tellus. Nam ut magna.</b>
</p>
</div>
<div id="rightcolumn"><h4>This is my rightcolumn</h4></div>
<div id="footer"><h4><p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>
  </h4></div>
</div>
</body>
</html>

If you paste this code into the validater it is xhtml1-strict.

I got this to validate by pasting it into the css validator.


#body {
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:16px;
     Background: url(http://www.geocities.com/dvdljns/images/angel.png); 
         }
h4 {
     margin:0px;
 }

#container {
     background-color:transparent;
     border:0px solid;
}

#header {
     background-color:transparent;
     border-bottom:0px; 
     height: 60px;
     text-align:center;   
 }

#leftcolumn {
     float:left;
     background-color:transparent;
     height:450px;
     width: 25%;
     text-align:center; 
     padding-top:2px;  
 }

#centercolumn {
     float:left;
     background-color: transparent;
     height:450px;
     width: 50%;
     text-align:center;  
     padding-top:2px;  
     overflow:auto;
 }

#centercolumn p {
     text-align:justify;
     margin:20px;
 }

#rightcolumn {
     float:left;
     background-color:transparent;
     height:450px;
     width: 24.9%;
     text-align:center;   
     padding-top:2px; 
 }

#footer {
     clear:both;
     background-color:transparent;
     border-top:0px;
     height: 60px;
     text-align:center;   
 }


If I type in this I can go to the file angel.png.

http://www.geocities.com/dvdljns/images/

But no way that I have tried to put that link into my css has allowed me to see the webpage with my background showing.

It is driving me crazy. everything I read says it should work. but it does not. Can someone figare out why.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

body-background in css

My earnest advice is to dump that awful geocities thing and get some real hosting there are just horrible bits of code throughout, why is there a link tag to a geocities stylesheet in the body?

I can't effect any changes to your page so have to conclude it's the crud that geocities inserts.

I would however optimize your image you simply can't have images that are 930k large, and check whether that is not a problem as well with perhaps permitted sizes or something, but most of all dump the free web space apart from anything it throws IE into quirks mode.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

body-background in css

Hugo wrote:
My earnest advice is to dump that awful geocities thing and get some real hosting there are just horrible bits of code throughout, why is there a link tag to a geocities stylesheet in the body?

I can't effect any changes to your page so have to conclude it's the crud that geocities inserts.

I would however optimize your image you simply can't have images that are 930k large, and check whether that is not a problem as well with perhaps permitted sizes or something, but most of all dump the free web space apart from anything it throws IE into quirks mode.

Hugo.

Here's where I am at now. I posted the webpage at. dvdljns.koolhost.com/
I cannot upload the image file but using the two hosts it shows up fine. In two days I will send money to webquary to host my pages.

As for as the 930k image. I have a comp here I use with a 28.8 modem connection and it loads in 3 seconds. Also keep in mind this is not really a website. The reason I want to start it is I keep downloading these templates to see the code and then I find out evan though some of them have a link to the validator they do not really validate.

1. It does not have a domain name.

2. It is not listed with a search engine.

3. It is just a way to get this stuff off my computor.

4. If something does not work right I know it is a problam with code and not windows.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

body-background in css

dvdljns wrote:
As for as the 930k image. I have a comp here I use with a 28.8 modem connection and it loads in 3 seconds.

I find that hard to believe. Even with a 1.5Mb connection like I've got, I'd very rarely pull down nearly 1Mb of data in 3 seconds.
Head over to http://www.websiteoptimization.com/ and see what they say about ideal file sizes for web delivery.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dvdljns
Offline
Regular
Last seen: 15 years 6 weeks ago
Joined: 2005-09-11
Posts: 17
Points: 0

body-background in css

Look I not only do not want to get bogged down on whether the timer on my comp is right. you miss the point I was trying to make.
I am not saying you are not right when you say that it needs to be smaller. I am saying that since this website is not meant to be visited right now, it does not matter.