body tag in my website

Ilaria · 02-14-2010, 06:56 PM

Hi I am making a website with a template. It has css and java. I am trying to change the css in the page and I want to put a background image in the body area of the website, but it doesn't work. I have tried to put body {background-image: url("images/miri4.jpg")} in the css in the html page and I have tried to add a new body tag in the html page and put the body tag in the external css sheet. Maybe you can look at the website and tell me what to do. It is on line at this site: http://www.ilariahonsinger.org/Miri Lee

Thanks for the help

aracaris · 02-14-2010, 08:45 PM

well you are leaving out the ; in the code, it won't work without it.

It should be
body
{
background-image: url("images/miri4.jpg");
}

not
body
{
background-image: url("images/miri4.jpg")
}

if even after that piece of code is fixed it still doesn't work, then you have another problem going on in addition to that one.

Ilaria · 02-14-2010, 08:53 PM

Hi Yes I tried that and still it doesn't work? I want to add it to this code <body style="margin:60px 0px 0px 60px;background:#9CC3C3;" > The link is www.ilariahonsinger.org/Miri Lee

jonweb2009 · 02-14-2010, 10:06 PM

try this

<body style="background:url(images/bgimage.jpg) top center no-repeat;">

no need for quotes, you can change the repeat if you want to repeat, repeat-x, repeat-y

hope this helps

Ilaria · 02-14-2010, 10:35 PM

Hi

I tried it again and it doesn't work. If I change the color it works only the background-image is not working. I would think it is some where in here that it should be placed

</head><body style="margin:60px 0px 0px 60px;background:#9CC3C3;">

<div id="trans"><h1>Miri Lee</h1></div>

I am a bit new at

this so thanks a lot for the help,

Ilaria

aracaris · 02-14-2010, 11:05 PM

If none of the codes people have suggested work, then there's some other piece of code that you need to fix first which is interfering with it. I recommend really look through all of your CSS and finding anything which could perhaps be over-riding rules that you are making for your body tag.

You should be able to just place the rule in an external style-sheet and have it work just fine. I use inline css here and there, but it really is best to keep it external for the most part. So something else is going on that is making it not work.
Keep in mind also that any CSS you have actually in your HTML page itself will over-ride external style sheet rules.

Also are you putting the code for the background image AFTER the code for the background color? If you aren't I recommend doing so and seeing if it works.

would probably also really help if you would post all your CSS code in a message here so that it is easy to look at.

Ilaria · 02-15-2010, 08:54 AM

Hi
Here is the css page of the website. It has no body tag, I cannot find a tag that is overriding the body tag, unless it is one of the other background images, I think they are in the main content. here is the link to my website again http://www.ilariahonsinger.org/Miri Lee maybe you can look at it This is: menu_megaSubs1.css

/****[Main Menu]****/

/*Main Menu Container*/
.nfMain {}

/*Items*/
.nfMain .nfItem {height:200px;}
#image1 {position: absolute; top:-100px; left:1px;}
#text1 {position: absolute; top:5px; right:-300px;}
h1{font-family: Century Gothic,Impact, sans serif;}
#trans {
filter:alpha(opacity=50);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

/*Item Links*/
.nfMain .nfLink {width:131px;text-align:center;padding:15px 0px 30px 0px;font-family:Arial;font-size:1em;color:#fff;text-decoration:none;}

/*Item Links - Hover (duplicate styles below!)*/
.nfPure .nfItem:hover>.nfLink, .nfPure .nfItem:hover>*>.nfLink {text-decoration:none;}
.nfPure .nfLink:hover, .nfMain .nfJSHover {text-decoration:none;}

/*Items - Active (Pure CSS Mode Only)*/
.nfPure .nfItem:hover {background:transparent url('../../images/gallery/menu/megaSubs1/hlBox.gif') no-repeat top;}

/*Items - Active*/
.nfMain .nfJSActiveItem {background:transparent url('../../images/gallery/menu/megaSubs1/hlBox.gif') no-repeat top;}

/*Item Links - Active*/
.nfMain .nfItem .nfJSActive {color:#333;background:transparent url('../../images/gallery/menu/megaSubs1/downArrow.gif') no-repeat 50% 100%;}

/*Item Links - Focus*/
.nfPure .nfLink:focus, .nfMain .nfItem .nfJSFocus {}

/*Item Links - Breadcrumbs*/
.nfMain .nfItem .nfJSBreadcrumb {color:#00f;}

/****[Sub Menus]****/

/*Sub Menu Position Offsets*/
.nfMain .nfSubC {margin:0px 0px 0px 0px;}

/*Sub Menu Styles*/
.nfMain .nfSubS {}

/*Items*/
.nfMain .nfSubC .nfItem {}

/*Item Links*/
.nfMain .nfSubS .nfLink {padding:0px;height:400px;width:800px;background:t ransparent url('../../images/gallery/menu/megaSubs1/megaBG.gif') no-repeat top;}

/*Item Links - Hover (duplicate styles below!)*/
.nfMain .nfSubC .nfItem:hover>.nfLink {}
.nfMain .nfSubC .nfLink:hover, .nfMain .nfSubC .nfJSHover {}

/*Item Links - Active*/
.nfMain .nfSubS .nfItem .nfJSActive {}

/*Item Links - Focus*/
.nfPure .nfSubS .nfLink:focus, .nfMain .nfSubS .nfItem .nfJSFocus {}

/*Item Links - Breadcrumbs*/
.nfMain .nfSubS .nfItem .nfJSBreadcrumb {}

This is menu_core.css, that I am using as well.

.nfMain, .nfSubC, .nfSubS{list-style:none;margin:0px;padding:0px;}
.nfMain{position:relative;z-index:1;}
.nfMain .nfSubC{visibility:hidden;position:absolute;}
.nfMain .nfItem, .nfMain .nfLink{list-style:none;position:relative;display:block;white-space:nowrap;margin:0px;}
.nfMain:after{content: ".";display:block;height:0px;clear:both;overflow:h idden;}
.nfPure .nfItem:hover, .nfPure .nfItem:hover>.nfSubC{z-index:1101;visibility:inherit;}
.nfPure .nfLink:focus{z-index:1102;}
.nfMain .nfJSActiveItem{z-index:1101;}
.nfMain .nfJSShowSub{z-index:1101;visibility:inherit;}
.nfMain .nfItem div.nfLink {cursor:default;}
.nfMain .nfItem {float:left;}.nfMain .nfItem .nfItem {float:none;}.nfMain .nfItem .nfSubC {top:100%;left:0px;width:auto;}.nfMain .nfSubC .nfItem .nfSubC {top:0px;left:100%;width:auto;}

northpark · 02-15-2010, 10:15 AM

You have more styles within your html

<body style="margin: 60px 0px 0px 60px; background: rgb(156, 195, 195) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">

This is overriding your stylesheet, as it specifies none for background image.

Don't put style within the html, only in your style sheet. Get rid of that and the code jon posted should work, if it doesn't, check the path to your image.

Ilaria · 02-15-2010, 10:47 AM

Hi
Sorry to bother you again,

It is still not working I put this in the style sheet and got rid of the body style in the html

}
body {
background-image:url(images/Untitled 3.jpg); top center no-repeat;

}
I tried to put the background code to :
}
body {
background-image:url(images/Untitled 3.jpg);
background-repeat: no-repeat;

}

johnscott · 02-15-2010, 12:37 PM

A couple things:

I used this style on your body tag on the index.html page: style="margin:60px 0px 0px 60px;background:#9CC3C3; background-image:url(images/miri1.jpg);

and your background came up as expected in IE8, Chrome and Firefox.

With your last post..if you moved the background style to an external style sheet, then you need to change the references to your image based on where that style sheet is not from the page the style sheet gets added to.

For example, if you have the style "background-image:url(images/miri1.jpg); " on the index.html page and the index.html and your images folder are in the same root directory...then that will work.

But if you have "background-image:url(images/miri1.jpg);" in an external css file burried in a sub-directory then you have to change the reference to "background-image:url(../images/miri1.jpg);"

/ - background-image:url(images/miri1.jpg);
/css - background-image:url(../images/miri1.jpg);

References to images within styles begin where the .css file is located..if the style is on the html page itself, then the reference will begin there.

I hope that makes sense.

02-14-2010, 06:56 PM	#1
Ilaria New Member Join Date: Feb 2010 Posts: 13	body tag in my website Hi I am making a website with a template. It has css and java. I am trying to change the css in the page and I want to put a background image in the body area of the website, but it doesn't work. I have tried to put body {background-image: url("images/miri4.jpg")} in the css in the html page and I have tried to add a new body tag in the html page and put the body tag in the external css sheet. Maybe you can look at the website and tell me what to do. It is on line at this site: http://www.ilariahonsinger.org/Miri Lee Thanks for the help

02-14-2010, 08:45 PM	#2
aracaris Bronze Member Join Date: Feb 2010 Posts: 71	well you are leaving out the ; in the code, it won't work without it. It should be body { background-image: url("images/miri4.jpg"); } not body { background-image: url("images/miri4.jpg") } if even after that piece of code is fixed it still doesn't work, then you have another problem going on in addition to that one. __________________ My Portfolio Samantha Dale Hairstylist Portfolio

02-14-2010, 10:06 PM	#4
jonweb2009 Bronze Member Join Date: Dec 2009 Posts: 60	try this <body style="background:url(images/bgimage.jpg) top center no-repeat;"> no need for quotes, you can change the repeat if you want to repeat, repeat-x, repeat-y hope this helps __________________ HTML PHOTOSHOP ASP.NET, JAVASCRIPT WEB DESIGN TUTORIALS. www.tutorialriver.com

02-14-2010, 10:35 PM	#5
Ilaria New Member Join Date: Feb 2010 Posts: 13	body tag Hi I tried it again and it doesn't work. If I change the color it works only the background-image is not working. I would think it is some where in here that it should be placed </head><body style="margin:60px 0px 0px 60px;background:#9CC3C3;"> <div id="trans"><h1>Miri Lee</h1></div> I am a bit new at this so thanks a lot for the help, Ilaria

02-14-2010, 11:05 PM	#6
aracaris Bronze Member Join Date: Feb 2010 Posts: 71	If none of the codes people have suggested work, then there's some other piece of code that you need to fix first which is interfering with it. I recommend really look through all of your CSS and finding anything which could perhaps be over-riding rules that you are making for your body tag. You should be able to just place the rule in an external style-sheet and have it work just fine. I use inline css here and there, but it really is best to keep it external for the most part. So something else is going on that is making it not work. Keep in mind also that any CSS you have actually in your HTML page itself will over-ride external style sheet rules. Also are you putting the code for the background image AFTER the code for the background color? If you aren't I recommend doing so and seeing if it works. would probably also really help if you would post all your CSS code in a message here so that it is easy to look at. __________________ My Portfolio Samantha Dale Hairstylist Portfolio Last edited by aracaris; 02-14-2010 at 11:13 PM.

02-14-2010, 08:53 PM	#3
Ilaria New Member Join Date: Feb 2010 Posts: 13	Hi Yes I tried that and still it doesn't work? I want to add it to this code <body style="margin:60px 0px 0px 60px;background:#9CC3C3;" > The link is www.ilariahonsinger.org/Miri Lee

02-15-2010, 08:54 AM	#7
Ilaria New Member Join Date: Feb 2010 Posts: 13	css Hi Here is the css page of the website. It has no body tag, I cannot find a tag that is overriding the body tag, unless it is one of the other background images, I think they are in the main content. here is the link to my website again http://www.ilariahonsinger.org/Miri Lee maybe you can look at it This is: menu_megaSubs1.css /**[Main Menu]*/ /Main Menu Container/ .nfMain {} /Items/ .nfMain .nfItem {height:200px;} #image1 {position: absolute; top:-100px; left:1px;} #text1 {position: absolute; top:5px; right:-300px;} h1{font-family: Century Gothic,Impact, sans serif;} #trans { filter:alpha(opacity=50); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; } /Item Links/ .nfMain .nfLink {width:131px;text-align:center;padding:15px 0px 30px 0px;font-family:Arial;font-size:1em;color:#fff;text-decoration:none;} /Item Links - Hover (duplicate styles below!)/ .nfPure .nfItem:hover>.nfLink, .nfPure .nfItem:hover>>.nfLink {text-decoration:none;} .nfPure .nfLink:hover, .nfMain .nfJSHover {text-decoration:none;} /Items - Active (Pure CSS Mode Only)/ .nfPure .nfItem:hover {background:transparent url('../../images/gallery/menu/megaSubs1/hlBox.gif') no-repeat top;} /Items - Active/ .nfMain .nfJSActiveItem {background:transparent url('../../images/gallery/menu/megaSubs1/hlBox.gif') no-repeat top;} /Item Links - Active/ .nfMain .nfItem .nfJSActive {color:#333;background:transparent url('../../images/gallery/menu/megaSubs1/downArrow.gif') no-repeat 50% 100%;} /Item Links - Focus/ .nfPure .nfLink:focus, .nfMain .nfItem .nfJSFocus {} /Item Links - Breadcrumbs/ .nfMain .nfItem .nfJSBreadcrumb {color:#00f;} /**[Sub Menus]*/ /Sub Menu Position Offsets/ .nfMain .nfSubC {margin:0px 0px 0px 0px;} /Sub Menu Styles/ .nfMain .nfSubS {} /Items/ .nfMain .nfSubC .nfItem {} /Item Links/ .nfMain .nfSubS .nfLink {padding:0px;height:400px;width:800px;background:t ransparent url('../../images/gallery/menu/megaSubs1/megaBG.gif') no-repeat top;} /Item Links - Hover (duplicate styles below!)/ .nfMain .nfSubC .nfItem:hover>.nfLink {} .nfMain .nfSubC .nfLink:hover, .nfMain .nfSubC .nfJSHover {} /Item Links - Active/ .nfMain .nfSubS .nfItem .nfJSActive {} /Item Links - Focus/ .nfPure .nfSubS .nfLink:focus, .nfMain .nfSubS .nfItem .nfJSFocus {} /Item Links - Breadcrumbs*/ .nfMain .nfSubS .nfItem .nfJSBreadcrumb {} This is menu_core.css, that I am using as well. .nfMain, .nfSubC, .nfSubS{list-style:none;margin:0px;padding:0px;} .nfMain{position:relative;z-index:1;} .nfMain .nfSubC{visibility:hidden;position:absolute;} .nfMain .nfItem, .nfMain .nfLink{list-style:none;position:relative;display:block;white-space:nowrap;margin:0px;} .nfMain:after{content: ".";display:block;height:0px;clear:both;overflow:h idden;} .nfPure .nfItem:hover, .nfPure .nfItem:hover>.nfSubC{z-index:1101;visibility:inherit;} .nfPure .nfLink:focus{z-index:1102;} .nfMain .nfJSActiveItem{z-index:1101;} .nfMain .nfJSShowSub{z-index:1101;visibility:inherit;} .nfMain .nfItem div.nfLink {cursor:default;} .nfMain .nfItem {float:left;}.nfMain .nfItem .nfItem {float:none;}.nfMain .nfItem .nfSubC {top:100%;left:0px;width:auto;}.nfMain .nfSubC .nfItem .nfSubC {top:0px;left:100%;width:auto;}

02-15-2010, 10:15 AM	#8
northpark Bronze Member Join Date: Jan 2010 Location: Glasgow, Scotland Posts: 29	You have more styles within your html <body style="margin: 60px 0px 0px 60px; background: rgb(156, 195, 195) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"> This is overriding your stylesheet, as it specifies none for background image. Don't put style within the html, only in your style sheet. Get rid of that and the code jon posted should work, if it doesn't, check the path to your image. __________________ North Park Design Web Design & Development www.northparkdesign.com Last edited by northpark; 02-15-2010 at 10:16 AM. Reason: typos

02-15-2010, 10:47 AM	#9
Ilaria New Member Join Date: Feb 2010 Posts: 13	Hi Sorry to bother you again, It is still not working I put this in the style sheet and got rid of the body style in the html } body { background-image:url(images/Untitled 3.jpg); top center no-repeat; } I tried to put the background code to : } body { background-image:url(images/Untitled 3.jpg); background-repeat: no-repeat; }

02-15-2010, 12:37 PM	#10
johnscott New Member Join Date: Jan 2010 Location: Edmonton, AB Posts: 21	A couple things: I used this style on your body tag on the index.html page: style="margin:60px 0px 0px 60px;background:#9CC3C3; background-image:url(images/miri1.jpg); and your background came up as expected in IE8, Chrome and Firefox. With your last post..if you moved the background style to an external style sheet, then you need to change the references to your image based on where that style sheet is not from the page the style sheet gets added to. For example, if you have the style "background-image:url(images/miri1.jpg); " on the index.html page and the index.html and your images folder are in the same root directory...then that will work. But if you have "background-image:url(images/miri1.jpg);" in an external css file burried in a sub-directory then you have to change the reference to "background-image:url(../images/miri1.jpg);" / - background-image:url(images/miri1.jpg); /css - background-image:url(../images/miri1.jpg); References to images within styles begin where the .css file is located..if the style is on the html page itself, then the reference will begin there. I hope that makes sense. __________________ Regards, John Scott Edmonton Web Design And Development

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode