I want to have a div that has an image inside, but with the div and background being completely transparent, giving the impression the image exists alone, with the elements behind the background of the div appearing.
I've tried using rgba in several ways, such as background: rgba(204, 204, 204, 0.5); but all of these end up leaving a white background on the div when set to total transparency.
How can I implement this?
EDIT
Here is a picture:
How can I make the red button appear as normal, but be able to see what is behind the white part?
My HTML is as such:
<div id="transparent-background">
<img src="./images/ui/chat.gif" class="arrow-button"/>
</div>
Thanks,
Just use this CSS for your DIV:
#transparent-background {
background: transparent;
}
Related
I am working on this test page.
Scroll the page. The logo stays fixed on the background and this area I painted with purple scrolls over it. I made it purple just so I can see.
I am trying to make this area I painted with purple partially transparent, so I can see the background logo behind, as I scroll, like the purple area was a semi-transparent glass. The color is (255,0,255,0.6) and is defined on the secundario.css styles as
body.index #main {
padding-top: 5em;
background-color: rgba(255, 0, 255, 0.6);
}
Whatever I do, I cannot make this purple area semi-transparent. It stays opaque.
Any ideas? Thanks in advance.
I see that you found an alternative, but in case you are still wondering, I found your problem:
You have the background image as part of your banner section, which is a sibling to main (so, even if it looks like it, they do NOT overlap). If you want to see the image, you need to place it in one of the containers underneath, either page-wrapper or directly on the body.
The transparency works, you just can get different color results depends on element's color under the target with your rgba. Try to change background-color: rgba(255,0,255,0.6); to background-color: rgba(255,0,255,0.1); for example and you will see the difference.
Try using this
body.index #main {
opacity: 0.5;
padding-top: 5em;
background-color: rgba(255,0,255,0.6);
}
The transparency works, ok, but there is nothing below the purple area (just a blank page). You have set the logo background on your page header but that ends where your purple area starts.
The best would probably be to set the background on the #page-wrapper or similar parent element.
If you just want your element to be transparent, it's really as easy as :
background-color: transparent;
But if you want it to be in colors, you can use:
background-color: rgba(255,0,255,0.6);
https://www.w3schools.com/css/css_image_transparency.asp
I have discovered how to do it. I need to assign it to an independent id, not to a regular style.
Something is probably interfering with the current #main id, so, by creating a new one the problem is solved.
Thanks guys!
I'm trying to make a semi-transparent image scroll up to reveal another image below it.
So far, I've got the top image scroll up and the fixed image underneath, but I can't figure out how to get the transparent parts of the top image to show the fixed image underneath.
I've made sure that the top image is transparent and tested it by setting the top slides background color to red, which works fine, but setting it to transparent still shows as white.
In the CSS I've put both of these to no avail:
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
Could you tell me what I'm doing wrong or give me an alternate method to achieve this?
Thanks.
https://jsfiddle.net/3vw52ncb/2/
with help of jbutler483's fiddle, i have made what you want. You needed opacity to make image transparent and position: absolute; to remove white background.
Change your slide1'css with this code :
#slide_1 {
background-image: url("http://i.imgur.com/TIaK19Z.png");
background-size: 120%;
background-color: rgb(0, 0, 0, 0.2);
position: absolute;/* To remove white background */
top: 0;
opacity:0.8;/* To make the top image transparent */
left: 0;margin-bottom:100vh;
}
you can change the opacity value according to your need.
Tranparent fiddle and if you want then with white background fiddle
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
I have two div's which looks like this
<div id="outer">
<div id="inner>
</div>
</div>
#outer {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity:0.50;
}
The problem is that I get opacity and in the inner div. I know that I can put inner div outside the outer div, but this is not solution for me
Yeah that's because you are fading #outer and everything inside it.
If you are only trying to fade the background colour you have two options:
Use a transparent .gif as a background image.
use rgba. Rg. background-color: rgba(0, 0, 0, .6) is equals to Black with 60% opacity.
*EDIT*
Just realised it's for Internet Explorer 6, please be more clear next time.
In this case, rgba will not work, so give up on that.
You can still do so with transparent background image, but you'd need a jQuery plugin to make IE6 support .png images. Here's one http://jquery.andreaseberhard.de/pngFix/
Use rgba background colour to set opacity instead - your problem is just a standard css problem.
I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}