body tag in my website

I

Ilaria

New Member
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
 
A

aracaris

New Member
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.
 
J

jonweb2009

New Member
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
 
I

Ilaria

New Member
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
 
A

aracaris

New Member
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.
 
Last edited:
I

Ilaria

New Member
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:transparent 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:hidden;}
.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;}
 
N

northpark

New Member
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.
 
Last edited:
I

Ilaria

New Member
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;

}
 
J

johnscott

New Member
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.
 
You must log in or register to reply here.
Top