Change body background color in an iframe using one css file

Question

Using a iframe where I call a site from my webspace, Using one css file with body {background-color: #222}.

The iframe src also use this CSS file. The Problem is that the body in the iframe need another background-colour.

tried

iframe>body { background-color: #other }

Any idea or suggestions?

score 7 · Accepted Answer · answered Apr 24 '12 at 14:09

7

I assume the iframe takes up a smaller portion of your site. In that case I would advice you to simply use a div with the same size of the iframe is loaded, and giving this div the proper background-color.

OR: include a style property in the source of the iframe page:

<head>
    <style>body {background-color:#COLOR}</style>
</head>

answered Apr 24 '12 at 14:09

Daan Twice

337
1
3
15

Only works if the iFrame is from the same parent domain – Nah Feb 09 '18 at 12:13

score 5 · Answer 2 · edited May 23 '17 at 12:09

5

This question is similar to How to apply css to iframe content?. Basically you can use jQuery to change the CSS properties in the iframe

$('#yourIframe').contents().find('body').css({
    background-color: '#333333'
});

Edit: You may need to add that when the iframe loads:

$('#yourIframe').load(function(){ 
    $(this).contents().find('body').css({
        background-color: '#333333'
    });
});

edited May 23 '17 at 12:09

Community

1
1

answered Apr 24 '12 at 14:13

walmik

1,440
2
13
30

Only works if the iFrame is from the same parent domain – Nah Feb 09 '18 at 12:13
That is because of the same origin policy. It s a critical security mechanism to prevent someone loading up just about any site in a iframe and changing stuff there to serve a ulterior motive. – walmik Feb 25 '18 at 06:04

score 4 · Answer 3 · answered Jul 02 '14 at 10:16

4

Remember that a Javascript can modify only properties of iframe with the same origin of the site, otherwise you'll get a Security Error.

Protocols, domains and ports must match.

answered Jul 02 '14 at 10:16

Vito Schiavo

223
1
2
8

score 2 · Answer 4 · answered Jul 18 '13 at 14:17

2

ive used this and it works for me. (and its sooooo easy!)

in your CSS file put:

iframe { background-color:orange; }

Just change the "orange" to whatever color you need. Thats it!

Enjoy!

answered Jul 18 '13 at 14:17

Jeff

21
1

score 0 · Answer 5 · answered Apr 24 '12 at 14:02

0

In the page that the iframe contains, link another stylesheet and then change all the CSS styles that you wish to.

answered Apr 24 '12 at 14:02

Eric Frick

847
1
7
18

I wanne avoid to use 2 css files – Denny Mueller Apr 24 '12 at 14:04
have you tried adding a class to the iframe and then referring it by .Class>body {style : style } – Eric Frick Apr 24 '12 at 14:10

score 0 · Answer 6 · answered Jan 30 '16 at 06:09

0

using Javascript We can add Background Color to Iframe

 var x = document.getElementById("myframe");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.style.backgroundColor = "red";

Reference w3schools

answered Jan 30 '16 at 06:09

stalin wesley

165
5
13

Change body background color in an iframe using one css file

6 Answers6

Linked

Related