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 (http://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 (http://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.