Background bleeding through

[theremotedr]

Is there an equivalent in css like a layer ?
Not sure how to explain but here it is from a novice.
I have the background of which my template is sat ontop.
Before the content is loaded in the position intended the background is shown within this area.
I am going around in circles trying to complete this.
Below is a page where it can be seen,same on each page though.
http://www.theremotedoctor.co.uk/honda_keys.html

Click any of the options on the left and the background is shown in the space to the right just before the item for sale is shown.
Ideally i would like my own colour "#000066" to be shown "this is where the layer part is needed" so it blends nicely within the black borders BUT outside the black border needs to be aqua colour that you see.
I need to put something in place so i can achieve this goal but over my head im afraid & look to you again for help & where to apply it.

Thankyou.

[Snookerman]

I'm not sure I understand you correctly, but you can try either background: inherit; (inherits the background color of its parent) or background: transparent; (transparent background allowing whatever is underneath to be shown).

[theremotedr]

I have just changed the background colour to yellow to see if it helps explain.
You click the selection button on the left.
This then puts the item for sale in the vertical box on the right.
But before the item for sale is shown you see whatever colour the background is set at in the vertical box,so in this case at the moment yellow should be seen.

So what i would like to happen is where you have just seen the yellow in the vertical box,i need the yellow to be shown as #000066
BUT i do not need the background in the css file set to #000066 because what i see then is the main page flash #000066 BEFORE the background image is loaded.

So to overcome this i have a background image which is set at #92D6FB for the site to be used.
I will then have the background color also set to #92D6FB

This is where i need to css / layer option.
Show #000066 in the vertical box to then blend in with the page within the black border before the item for sale is shown.

Does that help ?

[jscheuer1]

What you have there is an iframe. If you want it to be the background of the surrounding area on the top page, the page in the iframe must be background: transparent. This must be set on the html, body and whatever else has background on the page in the iframe. The iframe itself will then be transparent and the backgroud around it on the top page will show through it as its background. For older IE browsers you need to also add the non-standard attribute of allowtransparency="true" to the iframe.

[theremotedr]

Sorry but im now confused.
Where you see the price and registerd post etc is blue,I still need this blue.
By making that transparent will that not then change from the blue to the yellow of which at the moment is the colour of the background.

Do you see the yellow background before the item for sale photo is loaded ?

[theremotedr]

Here we go.

Example 1 is correct as shown in link below
Example 2 is correct as shown in link below

Example 3 is the stage between the 2 operations you have just viewed.
The yellow is shown because the photo is still being loaded into its position and its the background in the css file "i selected yellow so it stands out just to show you"

What i need is the following.
"A" To be shown as #000066
"B" To stay the colour it is #000066
"C" To stay the colour it is #92D6FB

I do not want to make the background in the css file #000066 because i need the background in the css file to be #92D6FB.
Obviously if i change the background to RED then "A" will show red.
This is why i need something put in place so the yellow box you currently see is not altered when i change the background colour in the css file.

The blue page you see is made up of 3 images.
content
contect top
content bottom
These 3 images are then repeated down the page and is not the background in the css file.

http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/example1.jpg

http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/example2.jpg

http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/example3.jpg

[jscheuer1]

Set everything on the page in the iframe to background: transparent.

[theremotedr]

And what you call the iframe is what i call the rectangle box ?

[theremotedr]

I have changed one so far on the link below,press flip remote on page and its still flashing yellow.
http://www.theremotedoctor.co.uk/audi_accessories.html

It seems to be more visable on the page below as ive now added the code to all pages.
http://www.theremotedoctor.co.uk/honda_keys.html

This is the code for the iframe "rectangle box"
<div style="width: 300px; height: 525px; background:transparent margin: 0 auto;">

Do you see a problem with it ?

[ajfmrf]

I have changed one so far on the link below,press flip remote on page and its still flashing yellow.
http://www.theremotedoctor.co.uk/audi_accessories.html

It seems to be more visable on the page below as ive now added the code to all pages.
http://www.theremotedoctor.co.uk/honda_keys.html

This is the code for the iframe "rectangle box"
<div style="width: 300px; height: 525px; background:transparent margin: 0 auto;">

Do you see a problem with it ?

<div style="width: 300px; height: 525px; background:transparent;margin: 0 auto;">

I hope I did it right-you are missing the ; before the word - margin

[theremotedr]

Hi
Thanks for that but still i see the flashing yellow.
Check out this page and select a few of the options on the left then watch the yellow on the right flash before the item for sale is shown.
http://www.theremotedoctor.co.uk/honda_keys.html

Or short video
http://s670.photobucket.com/user/ipbr21054/media/FORUM%20POSTS/YELLOWFLASH.mp4.html

[jscheuer1]

Set the id="content_outer" to


#content_outer {background-color: #000066 !important;}

I didn't mean for anything on the top page to be background transparent, just everything on the external pages. Without background transparent on the external pages, the white of their bodies will show first in many cases.

And set whatever you have as yellow to #000066 as well.

[theremotedr]

Ok
Learning all the time.
Do i then need to put the previous code back to how it was.

[jscheuer1]

Not unless there is still a problem or it has created a new problem.

However, what the page is doing each time a button is clicked is injecting a new iframe into the markup. It's source (src) is already set to the desired page when it's injected. But in some browsers that might still allow for a brief moment when nothing is loaded into it. If so, in those browsers there will be a white flash that cannot be removed unless an entirely different approach is taken. Importing the external content via AJAX would probably work, as would having the content on the page already display: none or visibility hidden and simply revealing the desired one each time a button is clicked.

[theremotedr]

ok
Now thinking as to what to do as i thought i could do away with the flash alltogether.
Thanks for the help.

[jscheuer1]

It seems to be working better. Still flashes white sometimes. Try this. Make up a new stylesheet called external.css:


html, body {
margin: 0;
padding: 0;
}
* {
background: transparent !important;
}



On all the external pages, change this:


<link href="../style.css" rel="stylesheet" type="text/css" />

to point to the external.css file we just made.

The browser cache may need to be cleared and/or the page refreshed to see changes. Probably both, as these are in iframes and the browser will cache the external pages even when refreshing the top page.

[theremotedr]

I did not make this style sheet,my friend did and he is away at present.
Can i copy my existing sheet,delete the contents and add the following,
html, body {
margin: 0;
padding: 0;
}
* {
background: transparent !important;
}

Then just rename it to
external.css:

[theremotedr]

Ok
I have done what i said,
Copied original css file and renamed it.
Added the small amount of code to it.

Changed the code
from <link href="../style.css" rel="stylesheet" type="text/css" />

to <link href="../external.css" rel="stylesheet" type="text/css" />

The result is on one page so far.
http://www.theremotedoctor.co.uk/audi_keys.html

[jscheuer1]

Works well in Chrome, you would want to style the text though. IE still flashes until the external page is cached. Since there's only one, I don't know if that's because the page is cached or that the external stylesheet is cached. If the latter, it would cut down on flashing a lot.

But, as I said before, some browsers will see this as an empty iframe at first. Those that do will show white at first, at least until the external stylesheet is cached, perhaps until the external page is cached. There are alternative ways of dealing with the whole thing that wouldn't involve iframe (or object as you had before), that would not have these problems.

[theremotedr]

Ok
I must have a think as im getting deeper out of my depth.

Thanks for the input,now having a think.