How do I get `HTML > Body > Background-Color > Transparent`?

html css background background-color opacity

71,018

Solution 1

HTML provides no means to specify a transparent background (and the means it has to specify backgrounds of any kind are obsolete and should not be used). You can do this in CSS.

body { 
    background-color: transparent;
}

This will make the background of the <html> element visible.

There is no way to make the browser window transparent.

Solution 2

With inline-styling you can achieve this with:

<body style="background-color: transparent;">

But a better option is to put the following code:

body { background-color:transparent; }

in a CSS file which you link to in the <head> section of the page like so:

<link rel="stylesheet" type="text/css" href="NAMEOFFILE.css">

Solution 3

background-color: transparent;

Update
However, you HAVE NO WAY to make the browser window transparent. So, even if you use the code above, your background will still be white.

Solution 4

You need to use CSS instead of HTML attributes to set transparent background:

<body style="background: transparent; margin: 0; padding: 0;">

Preferably you should have a style sheet for the page where you put the styles instead of putting styles in the HTML elements.

Note: To have an iframe with a transparent background (which is the only way that a transparent background on a page can be used) you need to add the allowtransparency attribute to the iframe tag for it to work in IE:

<iframe .... allowtransparency="true"></iframe>

View more solutions

71,018

Author by

user2056563

Updated on July 05, 2022

Comments

user2056563 almost 2 years

I have this HTML:

<html>
    <head>
    </head>

    <body bgcolor="#FFFFFF" style="margin:0px;padding:0px;">
        <div style="width:100%; color:#000000; padding:25px; font-family: Segoe UI;font-size: 17px;">
        </div>
    </body>
</html>

I have set the background-color with bgcolor="#FFFFFF". But how do I make this transparent?

user2056563 about 10 years

where do i need to add ?
display-name-is-missing about 10 years

Preferably in a CSS file you link to in the <head> tag.
Razvan B. about 10 years

in the body style, or in a separate css file.
Ben about 10 years

This constitutes a style attribute of the body element in your mark-up. As an aside, I would suggest moving all your style directives into a separate stylesheet and link to that rather than spattering your mark-up with in-line styling directives.
user2056563 about 10 years

I just need to add body { background-color:transparent; } inside head tag right ?
display-name-is-missing about 10 years

@user2056563 this code will only make it transparent relatively to the elements 'behind' it, i.e. the <html> tag.
Quentin about 10 years

@user2056563 — No. Read the first four words of the last paragraph of the answer.
user2056563 about 10 years

I dont have any css file, but can we add in head section ? can you please show me how , as i am new here
Quentin about 10 years

@user2056563 — Since you are trying to influence the appearance of a webpage, you should do.
Quentin about 10 years

Go and look up any basic CSS tutorial.
Paulie_D about 10 years

"There is no way to make the browser window transparent."... and even if there were...what would you expect to see on the other side. :)
wmsschlck almost 8 years

whatever was underneath the window on your OS :)
Alexei Martchenko almost 8 years

Yea but consider a HTML loaded in a iframe. That HTML inside an iframe with body transparent works and it doesn't paint the BG color at all.
opyate over 6 years

I can think of a use-case for this: when taking a screenshot with Chrome headless Selenium web driver, for instance, I'd like to have the resulting PNG transparent (apart from the visible elements).
Pimp Trizkit about 4 years

I can think of another use-case for this: When making the popup.html for a Chrome extension. This is the bit of html that is displayed when clicking on the button added by your extension to the browser (next to the address bar). I have tried to round the edges but the corners of a white box are now visible. I want this transparent. Unfortunately, this solution does not do that.
user692942 about 4 years

None of that will make the Browser Window transparent the html will still default to a white background, it's just not doable without manipulating the window using the Windows GDI and even then I imagine it wouldn't be easier.
Brain about 3 years

@Paulie_D, Streaming software like OBS is now able to use transparent backgrounds, very useful for dynamic overlays in html, js and css.