Jump to content

css background image

a.c.

By a.c.
in CSS

Recommended Posts

a.c. Newbie

a.c.

Posted
Posted

I was wondering if someone could tell me why I'm not able to get a background-image using css. I'm new at this so forgive my ignorance. I was able to get the same image using html but couldn't understand why I wasn't able to do the same with css.

Link to comment
Share on other sites
Drycodez Member

Drycodez

Posted
Posted

Try this...

body{background-image:url('your-image.gif');}

sometimes, if your image is too small to feet the size of the screen, then the image will be tiles (small particles). If that occurs, then try this instead.

body{background-image:url('your-image.gif'; background-repeat:norepeat;)

that will be all.

Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted

Here is the html with the css. Sorry i didn't understand exactly what you meant in regards to the path.<!doctype html><html><head><style type="text/css"> body {background-image:url('p10.jpg');}</style></head><body></body></html>

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

the path refers to the location where the file is stored. ideally one uses relative paths (images/image.jpg), as opposed to an absolute path (c:/documents/user/webfolder/images/image.jpg).Is this image in the same folder as this webpage?additionally, check out this topic in the HTML subforum about images.http://w3schools.invisionzone.com/index.php?showtopic=34257

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

You don't have any content? (Nothing between the body tags?)If that is true, then the body has a height of 0 and the image won't appear. Try putting some dummy text on the page and see if the image appears. Or give the body height: 100%.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
You don't have any content? (Nothing between the body tags?)If that is true, then the body has a height of 0 and the image won't appear. Try putting some dummy text on the page and see if the image appears. Or give the body height: 100%.
oh yeah, that too... :)
Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted

Below is everything that I have attempted to put into the web page. I already had content in the body but still couldn't get the image. Both the image and the webpage are on my desktop but not in the same folder. Also when I tried the suggestions made for the background-image. It seemed to have had an effect on the table because the borders around <table> and <td> disappeared. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css">body {background-image:url("p10.gif"; background-repeat:norepeat;)li a:link; {color:red;} a:visited {color:blue;} a:hover {color:red;} a:active {color:green;}ul {list-style-type:none; text-decoration:none;}table {border:3px solid red;}td {border:2px solid blue; padding: 3px; text-align: centre;}</style></head><body height="100%"><img src="p10.jpg" alt=" joker" height="150px" width="125px" /></br><ul><li> <a href="w3schools.com">red</a> </li><li> <a href="w3schools.com">green </a></li><li> <a href="w3schools.com">blue </a></li><br/><br/><table ><tr><td> red</td><td> green</td><td> blue</td></tr> <tr><td> blue</td><td> red </td><td> green</td></tr></table></body></html>

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Both the image and the webpage are on my desktop but not in the same folder.
this is the issue I was trying to address with my post and the link I offered...
the path refers to the location where the file is stored. ideally one uses relative paths (images/image.jpg), as opposed to an absolute path (c:/documents/user/webfolder/images/image.jpg).Is this image in the same folder as this webpage?additionally, check out this topic in the HTML subforum about images.http://w3schools.invisionzone.com/index.php?showtopic=34257
You should really consider keeping all your web content (HTML/CSS/images) relative to one folder. The reason its not working is because the HTML page is looking for the image relative to its location. In order to get it to work currently, you have to find whatever folder the image is in and then make sure you have whatever extra folders are needed to get to to it from the desktop included in the path you have in your CSS, i.e.
{background-image:url("folder(s)_the_images_is_in/p10.gif"; background-repeat:norepeat;}

Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted

Tried the code below, but still no image. Everything is in one folder which I named 'website'. Instead the border of the table disappears??{background-image:url('C:\Documents and Settings\me\Desktop\website\p10.jpg');}

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Tried the code below, but still no image. Everything is in one folder which I named 'website'. Instead the border of the table disappears??{background-image:url('C:\Documents and Settings\me\Desktop\website\p10.jpg');}
If you moved the image into the same folder as the HTML document, you didn't need to change the url. If everything is in the website folder it should work just fine like this:body {background-image: url('p10.jpg');}
Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted
If you moved the image into the same folder as the HTML document, you didn't need to change the url. If everything is in the website folder it should work just fine like this:body {background-image: url('p10.jpg');}
Still the image doesn't appear, thanks for the help though.
Link to comment
Share on other sites
goggy Newbie

goggy

Posted
Posted

Is the code pasted above actually the code you are using to display your page (copy/paste) or is it just an example. If it's the real code there's quite a lot of syntax errors in it.Code should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head>    <style type="text/css">        body {            height: 100%;            background-image: url("p10.gif");            background-repeat: no-repeat;        }               a:link { color:red; }        a:visited { color:blue; }        a:hover { color:red; }        a:active { color:green; }        ul {            list-style-type:none;            text-decoration:none;        }        table {            border:3px solid red;        }        td {            border:2px solid blue;            padding: 3px;            text-align: center;        }    </style></head><body><img src="p10.jpg" alt=" joker" height="150px" width="125px" /><br/><ul><li> <a href="w3schools.com">red</a> </li><li> <a href="w3schools.com">green </a></li><li> <a href="w3schools.com">blue </a></li></ul><br/><br/><table ><tr><td> red</td><td> green</td><td> blue</td></tr><tr><td> blue</td><td> red </td><td> green</td></tr></table></body></html>

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Still the image doesn't appear, thanks for the help though.
can you please post the full HTML/CSS again showing your most recent changes?
Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted

The code as it stands now.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css">body {height: 100%;background-image: url('p10.jpg');background repeat: norepeat;} li a:link; {color:red;} a:visited {color:blue;} a:hover {color:red;} a:active {color:green;}ul {list-style-type:none; text-decoration:none;}table {border:3px solid red;}td {border:2px solid blue; padding: 3px; text-align: centre;}</style></head><body><img src="p10.jpg" alt=" joker" height="150px" width="125px"></img></br><ul><li> <a href="w3schools.com">red</a> </li><li> <a href="w3schools.com">green </a></li><li> <a href="w3schools.com">blue </a></li><br/><br/><table ><tr><td> red</td><td> green</td><td> blue</td></tr> <tr><td> blue</td><td> red </td><td> green</td></tr></table></body></html>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

I'm not sure if this will prevent your CSS from loading or not but you have a syntax error here:a:link; {color:red;} Remove that first semi colon (after 'a:link')Also, norepeat should be hyphenated: background-repeat: no-repeat;If that doesn't fix the issue, try first clearing your cache and check your file paths one more time (the HTML file and the image need to be in the same folder)

Link to comment
Share on other sites
DerekvG Newbie

DerekvG

Posted
Posted

directory struc of site / index.htm/ contact.htm/ style.css/ images--/bgimg.jpg/en --/enwelcome.htm--/en...htm/fr--/frbienvenu.htm--/frIf I use a backagroundimage in style.css like #tiger_panel { padding: 49px 25px 0px; background: #46464a url(images/blueyecats.png) no-repeat scroll 0%; float: left; width: 250px; height: 200px;}then style will be correct and teh bgimage will display in index.htm using this refernce : <link href="style.css" type="text/css" rel="stylesheet">the text formating will be correct but the bg will not display in enwelcome.htm using this reference :<link href="../style.css" type="text/css" rel="stylesheet">Its not really an option to remove the directory structure and making 4 different style.css file defeats the purposeany good advise

Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted

I tried linking the style sheet externally and still the image doesn't appear. I'm really confusedHere is the code for html.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="web.css"></head><body><img src="p10.jpg" alt=" joker" height="150px" width="125px"></img></br><ul><li> <a href="w3schools.com">red</a> </li><li> <a href="w3schools.com">green </a></li><li> <a href="w3schools.com">blue </a></li><br/><br/><table ><tr><td> red</td><td> green</td><td> blue</td></tr> <tr><td> blue</td><td> red </td><td> green</td></tr></table></body></html>This is the code for css.body {background-image: url('p10.jpg')float: left;height: 200px;width: 150px;} li a:link {color:red;} a:visited {color:blue;} a:hover {color:red;} a:active {color:green;}ul {list-style-type:none; text-decoration:none;}table {border:3px solid red;}td {border:2px solid blue; padding: 3px; text-align: centre;}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

add semicolon to end of background-image declaration.body {background-image: url('p10.jpg');float: left;height: 200px;width: 150px;}you would not use float in the body, and you certainly do not need content to see the image in the background of the body, you would only use height and width in body in odd occasions, when some elements require it to adjust there height to the full height of or place themselves at bottom of browser viewport.

Link to comment
Share on other sites
mnkn Newbie

mnkn

Posted
Posted

I'm pretty sure that one of the browsers doesn't allow you to use quotation marks. (I assume that bug is fixed in all the latest ones, though)So try...background-image: url(p10.jpg);instead of background-image: url('p10.jpg');Also, Opera sometimes doesn't display an image if it is too big.

Link to comment
Share on other sites
a.c. Newbie

a.c.

Posted
  • Author
Posted

changed the code for css, but still no background-image. I have another question about the html file that i saved.It opens with google chrome, but the icon for google chrome isn't displayed on the file. Instead its a sheet of paper with little icons. I'm wondering if maybe this might be the problem.body {background-image: url('p10.jpg');} li a:link {color:red;} a:visited {color:blue;} a:hover {color:red;} a:active {color:green;}ul {list-style-type:none; text-decoration:none;}table {border:3px solid red;}td {border:2px solid blue; padding: 3px; text-align: centre;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...