Jump to content

CSS Mix Up


Graeme

Recommended Posts

Hello All,

 

I'm trying to figure out my CSS so that I can add a background image. I'm not too sure where to put it!

 

I use the code:-

 

body {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

font-family: verdana, arial, helvetica, sans-serif;

color: #B4AD90;

background-color: #B4AD90;

text-align: center;

/* part 1 of 2 centering hack */

}

a {

text-decoration: none;

font-weight: bold;

color: #ccc;

outline: none;

}

a:visited {

color: #ccc;

}

a:active {

color: #ccc;

}

a:hover {

color: #ccc;

text-decoration: underline;

}

.ahem {

display: none;

}

strong, b {

font-weight: bold;

}

p {

font-size: 12px;

line-height: 22px;

margin-top: 20px;

margin-bottom: 10px;

}

 

/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/

 

h1 {

font-size: 24px;

line-height: 44px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h2 {

font-size: 18px;

line-height: 40px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h3 {

font-size: 16px;

line-height: 22px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h4 {

font-size: 14px;

line-height: 26px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h5 {

font-size: 12px;

line-height: 22px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

h6 {

font-size: 10px;

line-height: 18px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

}

img {

border: 0;

}

.nowrap {

white-space: nowrap;

font-size: 10px;

font-weight: bold;

margin-top: 0;

margin-bottom: 0;

/* must be combined with nobr in html for ie5win */

}

.tiny {

font-size: 9px;

line-height: 16px;

margin-top: 15px;

margin-bottom: 5px;

}

#content {

padding: 4px;

margin-top: 40px;

margin-bottom: 20px;

margin-right: auto;

margin-left: auto; /* opera does not like 'margin:20px auto' */

background: #B4AD90;

border: 5px solid ;

text-align:left; /* part 2 of 2 centering hack */

width: 400px; /* ie5win fudge begins */

voice-family: "\"}\"";

voice-family:inherit;

width: 370px;

}

html>body #content {

width: 600px; /* ie5win fudge ends */

background: #B4AD90 url("../images/back.gif") bottom center no-repeat; }

}

pre {

font-size: 12px;

line-height: 22px;

margin-top: 20px;

margin-bottom: 10px;

}

 

But there seems to be a few options.

 

The site is at www.greenhouseflorists.co.uk, you can see that at the moment the background is black.

 

Thank you as always.

 

best wishes

Graeme

Link to comment
Share on other sites

This is in your default.css file:

 

body {

background: #000000;

text-align: justify;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: small;

text-align: justify;

color: #555E4F;

}

 

You would just add the url to the background image to the background: #000000 line.

 

I'm not seeing the CSS you posted for the body in the default.css file....

Link to comment
Share on other sites

Hello,

 

Thanks for this. I just realised I have two CSS. One for the Flash intro and one for the rest of the site.

 

I use

 

body {

background: #000000;

text-align: justify;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: small;

text-align: justify;

color: #555E4F;

}

 

for the first one. Where do I insert the code, after background?

 

Incidently, how does the rest of the site have the colour black throughout if the second style sheet doesn't declare it?

 

Many thanks as always,

 

best wishes

Graeme

Link to comment
Share on other sites

Your Flash Intro page (I hate those) is connected to stylesheet homedefault.css. Your 'index' page links to default.css (and check your corporate page, it links to it twice).

 

You'd insert the code like so:

background: #000000 url(img/pic.jpg) no-repeat (or repeat-x/y);

 

And I don't know what you mean by the second stylesheet (which is it?) not declaring the background color. From my POV, homedefault.css would be the first one, and default.css the second one, and I imagine all your 'inner' pages connect to it (once or twice :P )

Link to comment
Share on other sites

Hello Andrea,

 

You are right, the Flash Intro page (I'm not that keen either) is connected to stylesheet homedefault.css, and the 'index' page links to default.css. I understand the code example you gave me, thank you, but I was wondering how the rest of the site, from the index page onwards has a black background colour as the, as you say, is not in the homedefault.css.

 

You have answered my questin about having a background image where the black is but I was just wondering about the background as it is at the moment.

 

Thank you so much,

 

Best wishes

Graeme

Link to comment
Share on other sites

I'm not sure if I'm understanding correctly, but I'll try:

 

The flash index page links to the homedefault stylesheet and that applies a background color of #B4AD90 (a beige color).

 

All the other pages link to your default stylesheet, and that applies the black background color. If you remove the link to the stylesheet on any one page, ALL its styles will disappear.

 

Is that what you were asking?

 

You might want to check the header info on all your pages - I just stumbled upon another one that links to the default stylesheet TWICE.

Link to comment
Share on other sites

Hello again Andrea,

 

Thanks for this.

 

I apologise foe the confusion!

 

This is the body for the the homedefault.css

 

body {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

font-family: verdana, arial, helvetica, sans-serif;

color: #B4AD90;

background-color: #B4AD90;

text-align: center;

 

and this is the body for the default.css

 

body {

background: #000000;

text-align: justify;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: small;

text-align: justify;

color: #555E4F;

 

I have the index page linked to homedefault.css and the rest of the site linked to default.css from the next page in (homeindex.html. I can't find the link to the css file in homedefault.html!

 

Anyway, it is from the homedefault.html onwards that I would like to have a background image.

 

Thanks and thanks again.

 

Best wishes

Graeme

Link to comment
Share on other sites

I have the index page linked to homedefault.css and the rest of the site linked to default.css from the next page in (homeindex.html. I can't find the link to the css file in homedefault.html!

Code from homedefault.html



It's right above the javascript line, just doesn't begin as a new line, so you've probably overlooked it.

Anyway, it is from the homedefault.html onwards that I would like to have a background image.
So open your default.css and add the image to the body style (or whichever division it needs to be in like I said in Post #4.

 

Or am I still not understanding what you mean?

Link to comment
Share on other sites

  • 2 weeks later...

Hello Andrea,

 

It's me again.

 

I tried this:-

 

background: #000000 url ("../images/back.gif") no-repeat (or repeat-x/y);

 

in the default.css file and created an image of 120x120.

 

The page jusst has a white background, no image.

 

Thank you,

 

Best wishes

Graeme

Link to comment
Share on other sites

Compare your code to the one I gave you a few posts earlier - I have no quotes around the gif url. Also, this part "(or repeat-x/y)" is not actual code, that was just a comment with an option - take it out.

 

Then make sure your image is actually uploaded and the path in your url(...) is correct.

Link to comment
Share on other sites

repeat-x and repeat-y repeats your background image either vertically or horizontally only - and for the life of me, I never know which is which and just try and see. If you don't specify anything, your background image will repeat vertically AND horizontally, and cover the entire background. If you state no-repeat - then your image will show up only one time. That's usually when you also want to add css to define WHERE you want it.

 

http://www.w3schools.com/css/css_background.asp

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...