image selection

[hidden]

Hello,

I have a problem i placed an one colored background in my website but i placed another white image behind my text so when i want to select the text in my site it also selects the entire white image that is behind the text and every looks messed up how do i make that white image on the back of the text unselectable i have seen many sites that have many images in the background but when you try to select the text the image doesn't get selected

for example www.answers.yahoo.com also has a white background behind there text similar to mine but when you try to select all the text the white background doesn't get selected

my website is www.namaafoundation.com

i hope my question is clear

Thank you

[jscheuer1]

You want a background image. Change:

<div id="bv_Image9" style="overflow:hidden;position:absolute;left:4px;top:206px;z-index:0" align="left">
<img src="images/white.png" id="Image9" alt="" align="top" border="0" style="width:976px;height:1222px;"></div>

to:

<div id="bv_Image9"></div>

and place this in your style section:

#bv_Image9 {
	width: 976px;
	height: 1222px;
	background-image: url(images/white.png);
	position: absolute;
	left: 4px;
	top: 206px;
}

[firedrow]

I know he has the image already, but why not use a background-color instead of background-image? Instead of:

#bv_Image9 {
	width: 976px;
	height: 1222px;
	background-image: url(images/white.png);
	position: absolute;
	left: 4px;
	top: 206px;
}

He could use

#bv_Image9 {
	width: 976px;
	height: 1222px;
	background-color: white;
	position: absolute;
	left: 4px;
	top: 206px;
}

to achieve the same goal without adding another image to load for the viewer.

[hidden]

i am very new to coding so this might sound silly but how do i make the code work since i am using bluevoda WYISWYG website building software i know where to place in html codes but is that the whole code i have to place in?

Thank you both for your help

[jscheuer1]

Use a text only editor like Notepad. Find these lines in your page:

<div id="bv_Image9" style="overflow:hidden;position:absolute;left:4px;top:206px;z-index:0" align="left">
<img src="images/white.png" id="Image9" alt="" align="top" border="0" style="width:976px;height:1222px;"></div>

Change them to:

<div id="bv_Image9"></div>

Next, find this part:

<style type="text/css">
div#container
{
   width: 983px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
}
</style>

Make it like:

<style type="text/css">
div#container
{
   width: 983px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
}
#bv_Image9 {
	width: 976px;
	height: 1222px;
	background-color: white;
	position: absolute;
	left: 4px;
	top: 206px;
}
</style>

Save, and view it in the browser.