Ways to assign a default background shade to a webpage with a transparent background

Question

Ways to assign a default background shade to a webpage with a transparent background

My page has a completely transparent background achieved by using:

body {
  background:none transparent!important;
}

When I display this page in a transparent iframe on another site, I can see the website's background through the page.

However, if I access the page directly, the background appears white. Is there a way to change this to black?

Here is the code for the website:

<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>

html css

Answer 1

Answer №1

When you directly access the website, the body element is contained within the html, which has a default white background. This is why you see the page with a white background. If you prefer to view it with a black background, you can set the background color of the html element to black.

html {
  background: #000;
  margin: 0;
  height: 100%;
}

body {
  background: #fff;
  height: 100%;
  margin: 0;
}

<button onclick="document.body.style.background = 'transparent';">
  Make Transparent
</button>

Answer 2

When you directly access the website, the body element is contained within the html, which has a default white background. This is why you see the page with a white background. If you prefer to view it with a black background, you can set the background color of the html element to black.

html {
  background: #000;
  margin: 0;
  height: 100%;
}

body {
  background: #fff;
  height: 100%;
  margin: 0;
}

<button onclick="document.body.style.background = 'transparent';">
  Make Transparent
</button>

Answer 3

Answer №2

After trying various solutions, using background-color:initial; fixed the issue for me. Hopefully, it will do the same for you.

Answer 4

After trying various solutions, using background-color:initial; fixed the issue for me. Hopefully, it will do the same for you.

Answer 5

Answer №3

To set up this project, you will need to create three files and include the image link in the background-image attribute. The second file should be named test2.html and the third file should be named test3.html. Next, open the first file and click on the 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>

https://i.stack.imgur.com/yO305.jpg

Answer 6

To set up this project, you will need to create three files and include the image link in the background-image attribute. The second file should be named test2.html and the third file should be named test3.html. Next, open the first file and click on the 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>

https://i.stack.imgur.com/yO305.jpg

Ways to assign a default background shade to a webpage with a transparent background

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with Vue image source file paths?

What is the best way to assess a scope object within an ng-Class directive?

Concealing a table row if a different row is devoid of content

Exploring the ins and outs of webpage loading speed

What is the best method for applying a style specifically to controls located on the lower part of the

Troubleshooting an issue with IE regarding box-shadow CSS functionality

Aligning text in the center of a header, positioned beside an image

Preserving form data using JavaScript exclusively upon submission

Utilize PHP to input and swap information within SQL databases

Find out the dimension of an object's width

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

Adding a blank data-columns attribute using jQuery:

How to prevent v-menu from overlapping a navbar in Vue.js

Ways to conceal the contents of a page behind a transparent background div while scrolling

Easy Registration Page using HTML, CSS, and JavaScript

What steps should I take to incorporate Google AdSense advertisements onto my website?

What are some effective methods for overriding materialui styles?

Does HTML5 officially provide the speechsynthesis API for users?

"Creating a dynamic Map using the HERE Maps API and adjusting its size: A step-by-step guide