Transparent box CSS

Question

To clarify I photoshopped the desired result:

enter image description here

I do want the background image to cover the entire screen and the text to be near the bottom.

I want to have a transparent box so I can put text in it. I have looked it up online but I want the background to be fixed and scale to fit the background. Also I want the portion of the background image to be transparent while showing in the box, not the text in the box. Here is the code I have come up with so far:

HTML:

<body>
<div class="background"> // I don't know if its even needed to include this
<div class="transbox">
            <p> Text here.
            </p>
            </div>
    </div>
    </body>

CSS:

background.div {
    background: url(myimage.jpg) no-repeat center center fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
    -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
    background-repeat: no-repeat;
    color: white;
    font-family: Helvetica;

    div.transbox {
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
    div.transbox p {
    position: fixed;
    bottom: 0;
    width:100%;
    text-align: center;
    font-size: 65px;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: black;
   color: white;
}

I don't understand your problem. Do you just want a regular text "box" without background? — Matthias, Oct 07 '14 at 10:06
An image of what this is supposed to look like (with text in it) would be useful. — Paulie_D, Oct 07 '14 at 10:07
it would really help if you can photoshop a pic of the desired result, because i cant seem to understand what you are trying to achieve... — Banana, Oct 07 '14 at 10:07
Unless you specify a background, a css element will be transparent. It seems that you actually want some complicated mix of background images and opacity. It is extremely difficult to tell from your description. — i alarmed alien, Oct 07 '14 at 10:07
I do have a background I just didn't link it because the specific image is private. If anybody needs to use one: http://wallpaper-download.net/wallpapers/random-wallpapers-green-lime-background-wallpaper-32549.jpg — michael874, Oct 07 '14 at 10:11
To clarify I photoshopped the desired result: http://puu.sh/c2MsD/d3ff0eaaeb.png I do want the background image to cover the entire screen and the text to be near the bottom. — michael874, Oct 07 '14 at 10:15
Are you trying to make the text transparent to see 'through' the underlying bg color to the image below? Like this - http://stackoverflow.com/questions/13932946/transparent-text-with-white-background-with-css — Paulie_D, Oct 07 '14 at 10:22

score 4 · Answer 1 · answered Oct 07 '14 at 10:16

4

Use rgba

:root{
    background:#342c74
}

.transbox{
    text-align:center;
    background-color: rgba(118, 126, 154, 0.5);
    border:4px solid #1f1a46
}

markup

<div class="transbox">
    <p> Text here.</p>
</div>

DEMO

answered Oct 07 '14 at 10:16

Gildas.Tambo

22,173
7
50
78

I just want a specific portion of the background to change opacity. The portion where text will be. – michael874 Oct 07 '14 at 10:18
+1 thats a nice idea, put a semi transparent gray box under the text to make it look as if the image is transparent.. – Banana Oct 07 '14 at 10:25

Transparent box CSS

1 Answers1