How to set a html page as a background image?

Question

Is there anyways to set a html page in the background image property in CSS?

The css below is the result I need but I know it won't work.

my css

background-image:url(http://mydomain/project/test.html);

I have search online and seems like no one has worked on this before. Are there anyways around this? Thanks for the help!

`seems like no one has worked on this before` there must be a reason for that ;) — Ejaz, May 01 '13 at 20:43
What are you trying to accomplish? Maybe there's an alternate solution. — DACrosby, May 01 '13 at 20:45

score 2 · Answer 1 · edited May 23 '17 at 12:18

2

You can grab a screenshot (e.g. how to save specific part of page as image using JavaScript) and refrence resulting image in CSS

edited May 23 '17 at 12:18

Community

1
1

answered May 01 '13 at 20:42

Yuriy Galanter

38,833
15
69
136

The screenshot is what I need. I have done some researched. and found html2canvas. However, it only renders the dom not css properties. +1 though. – Rouge May 01 '13 at 20:54

score 1 · Answer 2 · answered May 01 '13 at 20:40

1

No way to do it.

Well theoretically there is a couple of ways to (would have to test, I'll get back to you) but it's an accessibility nightmare.

You're safest bet is to take a screenshot of the page you want as a background.

answered May 01 '13 at 20:40

Josh Dredge

107
1
1
10

score 1 · Answer 3 · answered May 01 '13 at 21:04

Okay, I agree with everyone else that this is just not a good thing to do and there is a reason no one has worked on it before.

That said, I was able to get it working alright with reasonably little effort. Screenshotting would be the best answer (and I still doubt that should be done, but hey you might have a special reason).

So the basic thing to do is set an iframe in your HTML, a div to stop it being active and another div on top of that to house your content. All absolutely positioned.

Your HTML would look like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en" ><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" />

<title>Template</title>

</head><body>
    <div class="content">
        <p>Content goes here</p>
    </div>
    <div id="background"></div>
    <iframe  src="http://bing.com" />
</body></html>

And your CSS:

*{margin:0;padding:0}


#background{
    position:absolute;
    background-color:#fff;
    color:#fff;
    opacity:0;
    filter:alpha(opacity=0);
    width:100%;
    height:70em;
    z-index:10;
}

.content{
    position:absolute;
    width:100%;
    height:70em;
    z-index:20;
    color:#fff;
}

iframe{
    position:absolute;
    border:none;
    z-index:0;
    width:100%;
    height:70em;
    overflow:hidden;
}

When putting your content in <div class="content"> becomes the new <body>. Pretty much put everything in that and style it as you normally would. I got a decent relatively-positioned, floating box based layout working with no issue.

Thanks Josh. I have a question, the div to show the image in iframe is fairly small. I set the width and height for my iframe to 200x200 but the actually html page is big. Is there a way to squeeze the html to 200x200? Thanks a lot! +1 — Rouge, May 01 '13 at 21:10
If you have access to the source, you can change it there but that's about it. Iframes were antiquated by the time I started learning HTML, so I've only ever used them experimentally. Whatever your doing is probably a bad idea... — Josh Dredge, May 01 '13 at 21:19

score 0 · Answer 4 · answered May 01 '13 at 20:39

You cannot do that with CSS property background-image. You could use absolute positioning and z-index to superimpose HTML content over other HTML content like a background image, but it's a workaround and in most cases wouldn't make much sense to do.

How to set a html page as a background image?

4 Answers4