CSS Forum

**Rachelsne** · 08-25-2009, 01:51 PM

I have a website that I am trying to make better-If I cant make it better I am going to pay someone to do it...although I pride myself in learning new things so really I would hate to do that. Any way I have got errors to correct with the code, but one of the things I was thinking about doing Is giving the whole thing a new look.

So far I do have a CSS book, I also have read lot on line, but at the moment this has got me stumped.

My main.css is from a website that has free templates, I have learnt a few things from making minor adjustments to it, but what I want to do is put this image as my background. I have tried doing an image tag like this:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: <background.jpg"> ;

But all that did was make my page go white, I tried it in a few places and the best I could gt it was to have the BG image and then the rest of the CSS showed up further down the page. I also tried putting it in my index.html page, but that didnt work either....

This is my site as it is currently. I know the site is poor and so is the code, but it is a work in progress so any advice would be great.

**64bytes** · 08-25-2009, 02:31 PM

Hi,

to correctly call a background image in css, you do the following:

Code:

background: #FFF url(background.jpg) no-repeat;

However, I do not believe that will produce the desired effect you are going for. I would assume that you want that gradient in your image to repeat infinitely, and in order to do that you would need to split your image into 2 separate images, one for the gradient, and one for the box area. If you were to just use the current code, and you opened your browser window wider than the image, you would see the edges of the image.

**radiant** · 08-25-2009, 03:09 PM

Hi Rachel, I did something like this myself. From the looks of your background image, you want to set it not to repeat, but to have a white background outside of that image?
This should do that-
body {
background-image: url(images/xxxxx.jpg);
background-repeat: no-repeat;
background-color:#FFFFFF;
}

As an alternative, I might suggest taking a 1 pixel width but full height sampling of your fade, using that as a background image, and tiling it across the full page.

body {
background-image: url(images/bgfade.jpg);
background-repeat: repeat-x;
background-color:#FFFFFF;
}

Then place your logo at the top of your layout as a separate image file.
Hope this helps!

**LadynRed** · 08-25-2009, 03:20 PM

Quote:

body {
background-image: url(images/xxxxx.jpg);
background-repeat: no-repeat;
background-color:#FFFFFF;
}

That is ok, and it's correct, but you can seriously shorten it to this:

Code:

background: #fff url(images/xxx.jpg) no-repeat;

You do have some invalid code in there, like this:

Quote:

You cannot put paragraphs inside a heading tag. Use a proper list for your menu, if that's what that is.

**Rachelsne** · 11:13 AM

Thank you!

I have decided to start my site again from scratch, Where would I add that code if I am setting up my page like this to start with?

my css page says: ( i feel like it should have something else, but my book just says type in the css page like i did.
background: #fff url(background.jpg) no-repeat;

<!DOCTYPE HTML PUBLIC
"-HTTP:WSC??DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/xhtml1-transitional.dtd">

<html xmlns="http xmlnx="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type"text/css
href="main.css" />
<title>
Welcome to Rachel Clare Photography
</title>
</head>
<body>
</body>
</html>

**Rachelsne** · 08-27-2009, 11:31 AM

ok, not sure what I did buut its fized now, I went for a back ground fade