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

Switch the appearance between two elements

Understanding the separation and communication techniques in Vue.js components

Headerbar overlapping Div when scrolling

Designing Material UI Button Styles

The outerHeight of Elements measured in pixels

Locate the div element containing specific text and remove the text from the

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

The variable "tankperson" is not recognized

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

As you scroll, the top block in each of the three columns will remain fixed within its

Issues persist with jQuery ajax request attempting to retrieve data from database

Bootstrap tab content getting shifted downwards

Tips for concealing password input in an HTML form

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Creating a JSON file using the attributes and values of HTML tags

The naming convention for CSS classes could be defined as follows: .sa-list li a > div{

Alter the color of Material UI Raised Button when it is hovered over

Vuetify vueJS dialog with elevated design

Unable to align a 1px element with the primary border

Webpack is failing to recognize certain CSS files