Setting a elements background to transparent makes it white - css

I am trying to set the color for a header on a wordpress website to transparent, so that the logo and menu icon show over the website's other elements and do not have their own background.
My issue is the following. The CSS that sets the header color is the following, in my app.css file:
header.dark-header {
background-color:#252627;
border-color:transparent;
border-bottom:0;
}
If I set that to transparent, the background actually turns white and is not transparent.
Images explaining the issue: https://imgur.com/a/XJta1p1
Website demo: http://security4.forebet.ro
I have no idea what to do or why this is happening. Anybody?

Setting background-color: transparent; should do the trick.
So like this:
header.dark-header {
background-color: transparent;
border-color:transparent;
border-bottom:0;
}

transparent is the default value for background-color, so if the element's background turns white when you use it, the default is probably being overridden by a parent element where background-color has an explicitly set value. Short of digging through your stylesheet and changing this (probably the best solution), you can use the CSS rgba() function to explicitly set the header's background opacity to zero like this:
header.dark-header {
background-color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
border-bottom:0;
}
Although be advised that browser support for the rgba() function is still a little spotty.

Related

css background transparency?

So I've been wasting a lot of time trying to do something simple. Using a custom css plugin I've been trying to set my body to be transparent to see the image in the background.
What I first tried using was opacity selector, but that set everything in the body as transparent. I'd like to have my images and text not be transparent. I've been googling this for many hours and each answer I see for other people is to use the rgba (number, number, number, opacity). I can see how this would work, but using this does not make the background transparent at all. I'm really at a loss for what to do, I feel like there is just something really simple I am missing.
Please inspect my code to see where I've gone wrong: [jaredbabinec.com][1]
Also here is my css:
body {
opacity: .9;
}
.site-header {
rgba(255, 255, 255, .9);
}
.site-content {
background-color: rgba(210, 210, 210, 0.9)
}
change the background color of the div with id="page"
for example
#page{
background-color: rgba(185, 178, 178, 0.71);
}
change the color as needed. Hope this will fix ur problem
use this
.site-content {background: rgba(210,210,210,0.9)}
`
.site-header {
rgba(255, 255, 255, .9);
}
`
rgba is not a property, it is a value you left out background:
Give the body the background image with background-size set to cover.
You want to create a site-wrapper div that is height and width 100%.
Make the background for that div transparent

CSS Opacity Box

Alright So here is my CSS style sheet.
#mainheader,#content{
opacity:0.35;
text-align:center;
background-color:#000000;
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
And as you can see it's a box that's see through, but has a small black background making text look fuzzy. Example.
http://i.stack.imgur.com/18dOZ.png
When I take away that background color I get more clear text like this...
http://i.stack.imgur.com/ixLva.png
Alright So what i'm trying to say it what can I write to have that text above that box being very clear text and not with it's dark opacity.
If you want to use CSS3, try:
background-color: rgba(0,0,0,0.35);
instead of opacity.
http://jsfiddle.net/vsZtM/
References from W3.org about RGBA:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/RGBA
Instead of opacity, change background of containers with an alpha channel:
#mainheader,#content {
background: rgba(0,0,0,0.35);
}
Where last param is the opacity.
Opacity changes the opacity for the entire element, while background:rgba(0,0,0,.35) will change only the background color.
You should try using rgba instead of opacity like so:
background-color: rgba(0,0,0,0.35);
Note: this is CSS3 and will only work in IE9 and up, so for other versions you should provide a fallback like so:
background-color: #000;
background-color: rgba(0,0,0,0.35);
You can set the background-color as an rgba value, and leave off the opacity in your CSS statement. For example:
#mainheader,#content{
text-align:center;
background-color: rgba(0, 0, 0, .35);
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
This will let your text stay fully opaque, while your background is semi-transparent. As a note, however, this will not work in Internet Explorer 8 and below -- it will be a solid background.

How do I make a div transparent on a white body background?

The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?
body {
background-color: #ffffff;
}
.box {
background-color: #999999;
background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}
Update:
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.
It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.
In your case it would be:
.box {
background-color: rgba(255,0,0,0.7);
}
You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:
.box {
background-color: #ff4c4c;
background-color: rgba(255,0,0,0.7);
}
UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.
You need to change the opacity of the background instead of the element:
.box {
rgba(255,0,0,0.6);
}
Or, since you are using a gradient, I would use this:
Ultimate CSS Gradient Generator
It will allow you to do semi-transparent backgrounds with a gradient.

RGBa vs Opacity (Specifically BBC Slider)

I am currently wondering which is the best CSS property to use, Opacity or RGBa? More specifically I am trying to recreate something similar to the famous BBC Home page slider, and it got me thinking why they use Opacity.
In my version I have came across using the following two versions of code:
.left-button {
background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK
background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat;
}
or
.left-button {
background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK
opacity: 0.4;
}
Obviously the second one makes the actual button image opaque too, which is why I assume the BBC has made separate buttons and background masks for the buttons (which in my opinion is unnecessary additional markup).
I'd like to use the first version with RGBa though. Would anyone care to point out why one is better than the other and if there is any compatibility issues I am unaware of?
Opacity is inherited to all child items, RGBa is not. If a child item has a lesser or no opacity, use RGBa.
IE8 and lower does not support RGBa, so you may need an opacity back-up plan.
Neither one is "better" because they do different things, so it depends on what you're trying to accomplish.
opacity sets the opacity for the entire element and all of its contents (text, inline images, etc). RGBa is a way to define a color with a certain level of alpha transparency.
So let's say you have a div:
<div>Hello!</div>
This will make the entire div and its contents ("Hello!") 50% opaque:
div {
background: #000;
color: #fff;
opacity: 0.5;
}
Whereas this will make just the background of the div 50% opaque, while leaving the text at 100% opaque pure white:
div {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}

Set opacity to the menu but keep text opaque in CSS

How can I create a menu which only its background is transparent? The text should keep opaque (opacity: 1)
If I set
li:hover {
opacity: 0.5
}
The whole list item becomes transparent. How do I fix that?
There is a new value in CSS3 called "rgba" that allows you to use a transparent color as a background color. For instance:
li:hover {
background-color: rgba(255, 255, 255, 0.5);
}
I'm fairly sure that should work, though I just wrote the code on the spot so it may not. This will, however, give your menu a white-ish tinge to it. If you want to read more about RGBA, though, go here: http://css-tricks.com/rgba-browser-support/
You’ll need to use either a transparent PNG image, or an rgba colour value, for the <li>’s background, e.g.:
li:hover {
background-color: rgba(0, 0, 0, 0.5);
}
Or:
li:hover {
background: url(a-nice-semi-transparent-png-image.png);
/* Supplying just the image file here will make the browser repeat the image
file vertically and horizontally, thus taking up all the space, just like a
colour would */
}
I don't think, that's possible, try this example: http://jsfiddle.net/578SV/
You can't. The transparency level gets handed down to all child elements.
Your options:
Place another element on top of the li, possibly using position: absolute, that has a normal opacity setting
Use a PNG file with Alpha transparency to create the opacity effect (Will need workarounds to work in IE6)
Use the new rgba colour property as shown by #hatkirby, if you can live with the incomplete browser support

Resources