Can I have a background of a div element be another HTML page?

Yes and no. You can but only with Firefox by using this property : background-image: -moz-element(#background); Here's some examples : http://jsfiddle.net/fstgerm/dvnE9/ https://developer.mozilla.org/en-US/docs/Web/CSS/element Otherwise I'd suggest to use a <canvas> and export its content as an image with toDataURL() and set your element background-image with it. Example : http://jsfiddle.net/fstgerm/E5Huu/

Yes, you can… sort of. Instead of a div, use an iframe. It is another block element, but it loads another HTML page. …but I wouldn't do anything like that for this problem. Maybe something like this instead: Create a DIV with the background, then a DIV with the content. Use CSS to position the content on top of the background. That way the background is scalable, searchable, selectable, vector type, and the content on top of it is as well. Then you can add the JavaScript to simply change that text occasionally so you don't have any extra HTTP requests to get every new HTML page for the changing background.

So from what I gather, forget about the background-image. You can simulate a background using position: absolute.  You can find the code here http://jsbin.com/zugim/1/edit?output of course I did not waist time adding all the other css, you can do that based on what you need. You may already know that if you add an id to the background content, then you can use ajax to just change only the contents of that div

No, this will not work. The background-image selector is only fit for images, like jpegs and gifs, etc. If you wish to make the text a background, take a picture or screenshot of the text and put that in the bg-i statement. If the different texts you want to switch around are finite (as in, you know which ones they are and you are going to periodically switch them), then take picture of all of them. If they are not, then, to my knowledge, it won't work. Since my knowledge of html and css pales in comparison to seasoned web designers, I would suggest putting this question also on http://stackoverflow.com.

If you want stylized text content with animation I don't think that embedding a page in a page is the best way to go about it. If you want it to be re-usable create a template in the back-end, or use some kind of front end JS templating service. If you have a good reason to a page as a background, use a div, an iframe, and a wrapper div to accomplish this. <wrapper>   <iframe src="something.html"></iframe>   <main>     ... content here   </main> CSS: wrapper{  position:relative: } iframe{   position:absolute;   top:0;   bottom:0;   left:0;   right:0; }

The only way that I am aware of is through iframe, which whilst that could be used as a div background, that could present a wealth of problems. You could use a service such as: https://www.url2png.com/ who wll allow you to grab screenshots of a web page, and supply them as a png - its all managed through an API, so it can be realtime, but the user will not be able to interact with the web page being shown.

Yes.  You can load content from another page with jQuery rather simply.  Here's an example. $("#content").load("somefile.html", function(response, status, xhr) {   if(status == "error") {     $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);   } }); Once you've figured out how to load the content into a container you can then position the container absolute and assign it a z-index. Z-index only works on absolutely positioned elements but essentially allows you to stack elements on top of each other.  The z-index defines the order in which they stack.  Elements with a larger z-index will appear overtop of elements with a lower z-index.  And the z-index value can be any positive or negative whole integer. So while you can't load external content as a background image you can position it in such a way that it is below another div, essentially as background. Note that the element on top will need background:transparent;

in jquery $('.bgimg').load('another-html-document.html'); here you can use internal page or <iframe src="http://somewebsite.com/orandhtmlpage.html" height="" width=""> And your content goes here <\iframe>

I am a little confused, but nevertheless, I will try and answer, you cannot make an background image another HTML page. An alternate solution to try is using the iframe tags in HTML; Maybe something like: <iframe src="http://somewebsite.com/orandhtmlpage.html" height="" width=""> And your content goes here <\iframe> Thanks for the A2A!! EDIT! -------------------- Due to the questions suggested by the question asker, I have added some sample code I created, try it out to see how it works http://shrib.com/A5vlClfJ Also, in a real website I would put the function in a setTimeout to scroll through the pictures/text