How to set a default background color for a page when the background is transparent
Question
I have page in which I have set the background as completely transparent using:
body {
background:none transparent!important;
}
This works as intended I am displaying this page in a transparent iframe on a different website and I want to see the website background through the page.
However if I access the page directly the background shows as white (its got to be something right?)
Is this a hardcoded browser thing or is there a way I can set this to black?
Website code:
<div class="page-background ">
<div class="header">
<span>Website menu here</span>
<span><a href="index.html">Book</a></span>
<span><a href="about.html">About</a></span>
<span><a href="contact-us.html">Contact Us</a></span>
</div>
<iframe src="http://localhost:4500" allowtransparency="true"></iframe>
</div>
2 answers
solution1
1 2019-07-04 02:15:07
When you access directly, your body has its parent as html which has background as white. This is the reason you see the white background. If you want to see black, you need to set your html to black background
html { background: #000; margin: 0; height: 100%; } body { background: #fff; height: 100%; margin: 0; }
<button onclick="document.body.style.background = 'transparent';"> Make Transparent </button>
solution2
0 2019-07-04 06:33:17
Just create these three files and provide the image link in background-image attribute then second file name should be test2.html and third file name shoud be test3.html. Then run the first file and click on book option.
<html> <body style="background-image:url('wallpaper2you_462082.jpg');background-size:cover"> <div class="page-background "> <div class="header"> <span>Website menu here</span> <span><a href="test2.html" target="iframe">Book</a></span> <span><a href="about.html">About</a></span> <span><a href="contact-us.html">Contact Us</a></span> </div> <iframe src="test3.html" allowtransparency="true" name="iframe"></iframe> </div> </body> </html>
<html> <body style='color:white'> <p>Hi</p> <p>How are you?</p> </body> </html>
<html> <body style='color:red'> <p>Hi</p> <p>How are you?</p> <p>Tell me about yourself.</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.