Making div element background transparent to background image CSS - html

Question

I would like to make a parallax effect within my website, however I am unable to set the background of a DIV element to be transparent, despite using background-color: transparent.
Essentially, I would like to solely display the text within a DIV, and remove the background color.
By using W3Schools..
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
/* The image used */
background-image: url('http://www.qygjxz.com/data/out/114/4676052-image.png');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
#media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}>
<div class="parallax"></div>
<div style="height:100px;background-color:transparent;font-size:36px">
Some text goes here, need to try to make the background of this transparent? Any ideas?
</div>
<div class="parallax2"></div>
Thank you

Answer 1

If you want to set the background color to transparent you can do all of these.
background-color: ;
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
but in this case, you need to set a different position here is the code I hope this is what you were looking for
<div style="height:100px;font-size:36px; border:1px solid red; position: absolute;">
Some text goes here, need to try to make the background of this transparent? Any ideas?
</div>

Answer 2

If you don't assign a background-color to your div, it would be transparent automatically. That's the default. I made a jsfiddle and tested it to make sure.
<div style="height:100px;font-size:36px; border:1px solid red;">
Some text goes here, need to try to make the background of this transparent? Any ideas?
</div>
If for any reason it didn't work, I would make a 2*2 transparent PNG in Photoshop and assign in as background-color, repeated in x and y directions both.
It's not a standard solution but will work surely. :D

Answer 3

I had a similar problem a few days ago.
You can easily write:
background: none;
or
background: transparent;
and then the element become transparent and the element under it will be visible.
But the text is still there.