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

Asked 9/5, 2014 at 12:3 Answered 26/8, 2020 at 14:45

html css background background-color opacity

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?

Chuppah answered 9/5, 2014 at 12:3 Comment(3)

Transparent ?? is it white or you wan to make that color thin ?? if so there is an property called opacity, try that out – Sporozoite 9/5, 2014 at 12:5

Maybe it is time for you to look into stylesheets. – Timbering 9/5, 2014 at 12:7

Just remove that attribute.. i.e bgcolor – Yare 9/5, 2014 at 12:8

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.

Cupel answered 9/5, 2014 at 12:4 Comment(5)

"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. :) – Bewilder 9/5, 2014 at 15:3

whatever was underneath the window on your OS :) – Faker 26/5, 2016 at 9:40

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). – Soak 15/2, 2018 at 15:59

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. – Elixir 26/2, 2020 at 18:42

@Paulie_D, Streaming software like OBS is now able to use transparent backgrounds, very useful for dynamic overlays in html, js and css. – Betatron 15/4, 2021 at 9:58

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

Futch answered 9/5, 2014 at 12:4 Comment(6)

I just need to add body { background-color:transparent; } inside head tag right ? – Chuppah 9/5, 2014 at 12:8

@Chuppah this code will only make it transparent relatively to the elements 'behind' it, i.e. the <html> tag. – Futch 9/5, 2014 at 12:8

@Chuppah — No. Read the first four words of the last paragraph of the answer. – Cupel 9/5, 2014 at 12:9

I dont have any css file, but can we add in head section ? can you please show me how , as i am new here – Chuppah 9/5, 2014 at 12:10

@Chuppah — Since you are trying to influence the appearance of a webpage, you should do. – Cupel 9/5, 2014 at 12:12

Go and look up any basic CSS tutorial. – Cupel 9/5, 2014 at 12:12

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.

Gaddy answered 9/5, 2014 at 12:4 Comment(5)

where do i need to add ? – Chuppah 9/5, 2014 at 12:4

Preferably in a CSS file you link to in the <head> tag. – Futch 9/5, 2014 at 12:5

in the body style, or in a separate css file. – Gaddy 9/5, 2014 at 12:5

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. – Wisnicki 9/5, 2014 at 12:6

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. – Ramses 14/7, 2016 at 16:12

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>

Petition answered 9/5, 2014 at 12:13 Comment(1)

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. – Tai 28/4, 2020 at 10:39

body {

    background-color: rgba(255, 255, 255, 0.5)
};

last value is alpha - it will set transparency values between 0 and 1; 0 transparent;

Inhabitancy answered 11/10, 2019 at 6:42 Comment(0)

Use body{background:none transparent;} or <body style="background:none transparent;"> There is no need for allowtransparency ="true" in your iframe.

Episiotomy answered 26/8, 2020 at 14:45 Comment(0)

Recommended topics

Hot tags