Member Avatar for pjrey

quick question..
is it possible to have a .html, the whole file, images and text BE the backround image for another page of mine?
this page will be just for me, password protected.. i would like the HTML backround image to be set at 60-70 opacity...

is this possible?
thank you
pj

  • 3 Contributors
  • 4 Replies
  • 114 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ccube921

Dani AI

Generated

Short answer: yes. Several practical routes exist depending on whether the background must be live HTML or can be a static image. As suggested, converting the page to an image (screenshot) is the simplest static route. For a live background, an absolutely positioned iframe is the easiest and most robust option; was right to mention z-index, but note that CSS opacity works on any element (not just images).

A minimal live-example pattern (HTML + CSS):

<div class="bg">
  <iframe src="log.shtml" frameborder="0" scrolling="no"></iframe>
</div>

<div class="front">
  <!-- my.shtml content here -->
</div>
html,body { height:100%; margin:0; }
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; }
.bg iframe { width:100%; height:100%; border:0; opacity:0.7; pointer-events:none; }
.front { position:relative; z-index:1; }

Key notes and troubleshooting:

  • Opacity applies to the whole iframe (text, images, links). That matches the request for 60–70% transparency but will also make the background content visually faint.
  • If the background page is password-protected or on another origin, framing can be blocked by X-Frame-Options or CSP frame-ancestors. Check response headers if the iframe is blank. See MDN on iframe and X-Frame-Options/CSP.
  • For a static, always-readable backdrop (no cross-origin/frame issues), generate a periodic screenshot and use it as a CSS background-image instead.
  • Accessibility and contrast: semi-transparent backgrounds can reduce legibility of overlaid text. Test color contrast and consider an overlay (solid color at low alpha) behind the front content.

This covers the practical tradeoffs: screenshot = simple and safe; iframe = live but can be blocked or affect performance; embedding raw HTML via AJAX is possible but risks CSS/script collisions.

Recommended Answers

All 4 Replies

Member Avatar for sillyboy

You could do this by doing something like converting the .html into an image (e.g. print screen). BUT I assume you are after some dynamic behaviour where the .html is parsed and then displayed...

If this is indeed the case, I think you will need to get creative. I am also not entirely sure there is an easy way to manipulate background images (for opacity) using conventional methods (html/css).

Member Avatar for pjrey

thanks for posting..
i was thinkging, couldnt i do something like iframe... so my new index consists of the one page taht i want as my backround (lets call it log.shmtl)... MY page only, call it my.shtml)
and post it together on index... so, log.shtml is shown at 70% opacity, my.shtml is posting over it...
that might work huh?
its n ot a big deal at all, more curious if it is possible than anything....
this is for my upcoming thailand trip... i post text/images, kinda like a blog (hate using that word) and it would be nice to see the page i am posting to, what i wrote last (i can easily just goto the page myself, i know!) but to have my log form ontop of it might be handy, maybe not... again, i was just more curious to see if it was easily possible or not..
thanks
pj

Member Avatar for sillyboy

iFrames hadn't crossed my mind. Using iFrames and some tricky css, it probably would be possible to achieve what you want.

Good luck

Member Avatar for ccube921

try an image map with javascript or you could cut the image up and use it for links, if you want you can div that whole page, put it lower on the z-index so that it automatically takes less precedence over the other things, but only the image map can get the opacity as far as i know unless you can do opacity on an html file.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.