Weird dots appearing behine my background image

[llckll]

Hello,

If you go to: http://www.arcolacovenant.org/redesign_index

The top and bottom bars and the about us drop down menu, there are these dots that are appearing in rows.

Does anyone know why that's happening? The background image is a 1x1 dot with 65% transparency that I created in Fireworks.

Any idea?

[coothead]

Hi there llckll,

the weird dots do not appear behind your background image, they are a part of it.

I have put a replacement image for you in the attached zip file.

coothead

[llckll]

thanks so much. I didn't realize it was part of it.

[coothead]

No problem, you're very welcome.

coothead

[llckll]

Was it because my canvas background was not transparent?

[coothead]

Hi there llckll,

I couldn't really say.

They did seem to be the same size as the dots to the bottom right of you slide show.

coothead

[llckll]

Hey Coothead, I'm going to need your assistance one more time...

http://arcolacovenant.org/Redesign_Inside

Do you know how to prevent the content breaking out of the div tag? Rather, it should push the bottom gray bar and footer down.

Thanks.

[coothead]

Hi there llckll,

make the following amendments to your CSS...

...change this...

#body_container {
	width: 900px;
	height: 550px;
	background-color:#FFF;
	margin: 0px auto 0px auto;
	-webkit-box-shadow: 0px 0px 35px #000;
	-moz-box-shadow: 0px 0px 35px #000;
	-o-box-shadow: 0px 0px 35px #000;
	box-shadow: 0px 0px 35px #000;
}

...to this...

#body_container {
    width:900px;
    background-color:#fff;
    margin:auto;
    -webkit-box-shadow:0 0 35px #000;
    -moz-box-shadow:0 0 35px #000;
    -o-box-shadow:0 0 35px #000;
    box-shadow:0 0 35px #000;
 }

...and this...

#body_content_container
{
	width: 900px;
	height: 100%;
	background-image:url(http://www.arcolacovenant.org/redesign/images/top_bar_bg.png);
	background-repeat: repeat-x;
	background-position: bottom;
	overflow: auto;
	
}

...to this...

#body_content_container {
    padding-bottom:40px;
    background-image:url(http://www.arcolacovenant.org/redesign/images/top_bar_bg.png);
    background-repeat:repeat-x;
    background-position:bottom;
    overflow:hidden;
 }

...and finally, this...

#body_content {
	margin: 40px 0px 0px 200px;
	padding: 0px 0px 0px 0px;
	position: absolute;
}

...to this...

#body_content {
    margin:40px 0 0 200px;
 }

coothead