site layout-need help

Need some help with my website with the background/layout. I have been going crazy with it. I loaded an image and want to put body into it with the static background. Can't seem to get to fit. All suggestions greatly appreciated!

my css looks like:
body {
background: #000;
background: url(../images/scroll.gif);
background-attachment: fixed;
float: center;
background-repeat:no-repeat;
color: transparent;
margin: 0;
height: 300px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
}
site is at https://www.burnerbooks.com/index.php

Thanks,
Kim
:cry:

Remove this from #mainWrapper (line 189) -

background-color: #ffffff;

That definately helped! :clap:

How did I get the top part of the body to move down so it fits into the image?

sorry, but .. what?

What are you trying to do exactly (and as i'm not too clever, pictures would help!)

If you look at the site. I finally got the image to go all way across, but can not seem to get the body to fit into the image.

My css is:
#mainWrapper {
text-align: center;
height: 300px;
width: 1000px;
margin-top: 100px;
margin-bottom: 100px;
vertical-align: top;
border: 3px solid #FFFFFF;
}

I have been trying to adjust top/bottom margins. Still have to get rid of border...I am new to php and all the coding.

https://www.burnerbooks.com/index.php
Thanks for your help. :smile:

Try putting your margin:top in the body

You still have white (#ffffff) background-color in several places in your header, which are covering the body background image.
#logoWrapper
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper
#navCatTabsWrapper (a second time!)
and possibly others.

You also have a number of CSS errors that are not helping, and at the least will confuse you in trying to make changes.

body {
	background: #000;
	background: url(../images/scroll.gif);
	background-attachment: fixed;
	float: center;
	background-repeat:no-repeat;
	color: transparent;
	margin: 0;
	height: 300px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	}
```should be```
body {
	/*background: #000; <-delete - this is negated by the second "background:" so put it there*/
	background: url(../images/scroll.gif) #000;
	background-attachment: fixed;/*this is default and generally doesn't need to be specified*/
	float: center;/* <-no such thing as float: center; - change to text-align: center; */
	background-repeat:no-repeat;
	color: transparent;/*this is font color - change it to a color, not transparent*/
	margin: 0;/*this is default and generally doesn't need to be specified*/
	height: 300px;/* <-delete - this is trying to make the whole page only 300px high!*/
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	}

:clap: Thank you so much! I made the changes you suggested.

I am still battling the logo with being transparent. I have it in the css but my image does not want to do it!

:clap: Kim

Is your logo a gif or a jpeg?

http://cter.ed.uiuc.edu/gif-jpeg

I started out with the logo as jpeg, but transparency did not work and white background looked really bad. I took off the Bibles and scroll to just have red and black words only. I changed to gif and set as transparency. But, that did not seem to work either. It just made the words look bad.

Kim

How did you "set as transparency"? I see the logo/wording has a transparent background now.

I tried it with gif. I think I may have to change it to a jpeg because words look bad.

I have been struggling with the layout of my site for a long time. Had some input from others that the scroll is too much. What do you think? Be harsh. It could make or break me. Wondering if I should just start over with the layout. I really like the burgundy and brown colors together.

Any input is greatly appreciated.
Thanks, Kim

You can't get transparency with jpegs. If gifs don't look good enough, you might try the .png format, which is reported to be better. I understand that IE6 doesn't handle transparency in the basic png format either, though. Do some research on it if you are interested.