• Registered: January 13, 2009
  • Posts: 70

Topic: CSS Mix Up

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

Vote up Vote down

  • Susie
  • Advanced Member
  • Offline
  • From: Columbus, OH
  • Registered: December 19, 2008
  • Posts: 3,144

Re: CSS Mix Up

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....

Susie
Auxano Creative / Twitter / Facebook

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Mix Up

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  tongue )

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Mix Up

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.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Mix Up

Graeme wrote:

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

<meta name="Description" content="Greenhouse Florists On Blossomgate, Ripon, North Yorkshire. Your modern local expert florist for everyday & every event. We deliver beautiful floral designs locally and nationally"><link href="default.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">

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

Graeme wrote:

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?

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

Hello Andrea,

Andrea wrote:

Or am I still not understanding what you mean?

You have been brilliant, thank you.

I'll let you know how I go.

Best wishes
Graeme

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Mix Up

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.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Mix Up

I looked at W3Schools - and they put quote around the path to the background image - http://www.w3schools.com/CSS/css_howto.asp - I haven't been, and it works.  But I don't know if both ways are ok - or if there is an issue with mine.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

Arghhhhhhhhhhh,

I tried this:-

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

even without the . . 's changed the path and evertything.  I even put the back.gif in the root directory but still white background.

Thanks

Best wishes
Graeme

Vote up Vote down

  • Registered: January 13, 2009
  • Posts: 70

Re: CSS Mix Up

Andrea, Andrea,

I think I'm getting somewhere!  I used the link you said and used:-

background-image:url("images/back.gif");

It tiles the back.gif image.

Can I ask you to explain the x and y options

Thanks

Best wishes
Graeme

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Mix Up

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

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: CSS Mix Up

Andrea wrote:

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 follows the standard x/y chart, same as you would in math... x is horizontal axis, y is vertical axis. Tricky to remember sometimes.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down