Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Background bleeding through

  1. #1
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default Background bleeding through

    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.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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).
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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 ?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,204 Times in 3,166 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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 ?

  6. #6
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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/v...S/example1.jpg

    http://i670.photobucket.com/albums/v...S/example2.jpg

    http://i670.photobucket.com/albums/v...S/example3.jpg

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,204 Times in 3,166 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

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

  9. #9
    Join Date
    Nov 2011
    Posts
    196
    Thanks
    2
    Thanked 1 Time in 1 Post

    Default

    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 ?
    Last edited by theremotedr; 10-15-2013 at 09:15 PM.

  10. #10
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Quote Originally Posted by theremotedr View Post
    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
    Thanks,

    Bud

Similar Threads

  1. Background Image Carousel won't load stuck on black background
    By accessotronik in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-15-2012, 02:23 PM
  2. Background Image Carousel background-size: cover; is not working
    By kerriluo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-12-2012, 09:38 PM
  3. Replies: 0
    Last Post: 01-10-2012, 04:27 PM
  4. Resolved Odd rollover/hover "bleeding" problem
    By Anthrogue in forum CSS
    Replies: 7
    Last Post: 08-13-2011, 01:55 AM
  5. Replies: 3
    Last Post: 02-24-2009, 12:25 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •