1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to change the background of an iframed website?

Discussion in 'HTML & JavaScript' started by auuuu, Dec 21, 2011.

  1. auuuu

    auuuu Elite Member

    Joined:
    Jul 10, 2010
    Messages:
    1,534
    Likes Received:
    349
    Occupation:
    Social Influencer
    Location:
    England
    Is there a way to change the background color of an iframed website?

    For example, if i iframe google (white background) can i change it in "green" or whatever color i want?

    Since i've an iframed offer and i want to show only the form that the user must fill, but the color is in conflict with the others colous...so i want to change it or mask it with other...

    PM Me for example link or if you haven't understand very well (i know, my english sucks)...

    Thank you so much! :D
     
  2. xpwizard

    xpwizard Junior Member

    Joined:
    Nov 6, 2010
    Messages:
    198
    Likes Received:
    122
    Simple answer: No

    You can add colored div's on top of the iframe to hide the background color. But that's a long process and then you have to factor in browser position (different browsers show the page differently).
    Of which it truly is a long process and in the end can be useless if the offer is removed.

    Best solution: Don't Iframe, or change your site to fit the iframed offer.
     
    • Thanks Thanks x 1
  3. webwhizz

    webwhizz Power Member

    Joined:
    Apr 3, 2011
    Messages:
    692
    Likes Received:
    656
    Occupation:
    P-R-0
    Location:
    scotland
    Yes you can change it by image
    Code:
    body {background-image:url('back.jpg');}
     
  4. fcb3323

    fcb3323 Registered Member

    Joined:
    Jun 30, 2011
    Messages:
    72
    Likes Received:
    13
    you can, if the background is white by default...just set allowtransparency="true" (will need some css modifications too to work in all browsers, you can fins that on google) and if the framed website has no background set, it will automatically be transparent and take your site's background
     
  5. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    Site A iframes Site B.

    You can not change anything on Site B via code on Site A due to modern browsers security restrictions.

    Only case is if you own both A and B, and then it 's quite tricky.
     
    • Thanks Thanks x 1
  6. auuuu

    auuuu Elite Member

    Joined:
    Jul 10, 2010
    Messages:
    1,534
    Likes Received:
    349
    Occupation:
    Social Influencer
    Location:
    England
    If i own both how i should do? I can ask to my network to change it if it's a simple modification...
     
  7. auuuu

    auuuu Elite Member

    Joined:
    Jul 10, 2010
    Messages:
    1,534
    Likes Received:
    349
    Occupation:
    Social Influencer
    Location:
    England
    I can't change the design on my website since it looks like a famous one...anyway seems that modify my website is the only way...

    Is there anything that can cover all the iframed things (as z-index) excepet some particular colours? Like in math...

    "We accept all the numbers in "N" except, for example 1"

    If there is something like this will be perfect, since i can ask to cover all with my color except the form's colours...
     
  8. xpwizard

    xpwizard Junior Member

    Joined:
    Nov 6, 2010
    Messages:
    198
    Likes Received:
    122
    Just a wild guess, but it looks like facebook?

    As jazzc pointed out, you can't do anything to the remote site via iframe. (Would be a major security risk otherwise).
    As I said previously, you can overlay the iframe with div's or an image cutout of sorts... This way you can cover everything except for the form and submit button.
    BUT yet again, it will have to be pixel perfect and you will need browser detection to move the img x amount of pixels over for every browser type.
     
  9. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
  10. auuuu

    auuuu Elite Member

    Joined:
    Jul 10, 2010
    Messages:
    1,534
    Likes Received:
    349
    Occupation:
    Social Influencer
    Location:
    England
    No, it's not Facebook...
    Yeah this should be the trick, but i believe that it'll cost me a lot of dollars right? I don't know how to cover all by div...
     
  11. jimbo87

    jimbo87 Regular Member

    Joined:
    Jan 18, 2011
    Messages:
    243
    Likes Received:
    61
    This should do the trick,

    http://net.tutsplus.com/tutorials/html-css-techniques/how-to-inject-custom-html-and-css-into-an-iframe/

    James
     
    • Thanks Thanks x 1
  12. auuuu

    auuuu Elite Member

    Joined:
    Jul 10, 2010
    Messages:
    1,534
    Likes Received:
    349
    Occupation:
    Social Influencer
    Location:
    England
  13. xpwizard

    xpwizard Junior Member

    Joined:
    Nov 6, 2010
    Messages:
    198
    Likes Received:
    122
    The method that he mentioned is only for an iframe that you control (iframing your own page)... This won't work with a third party website (such as a CPA offer).
     
  14. auuuu

    auuuu Elite Member

    Joined:
    Jul 10, 2010
    Messages:
    1,534
    Likes Received:
    349
    Occupation:
    Social Influencer
    Location:
    England
    Oh, perfect... :(