Is there an HTML code that can make my background picture transparent and my text non-transparent?

Question

Okay so I've been typing some HTML code for a technology class that I need to satisfy for my Education major. This is what i have for my background:

body {
    background-image:url('islandbeach.jpg');
    background-repeat:repeat;
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
}

Now, I want to make my background transparent or faded so I can see the text and the other image that I have. The background is too colorful to be able to see the words without having to squint. Are there any HTML codes that can do this for me? I am not a pro at this stuff, I've just been following everything my professor has told me to do so please explain stuff in baby steps if you do have an answer. Thank you so so much!

+1: Great question: I learned something! Thank you :) – paulsm4 Nov 17 '12 at 06:13 — paulsm4, Nov 17 '12 at 06:13

score 1 · Answer 1 · answered Nov 17 '12 at 04:56

Here is a simple hack you can do using the :after property.

Css Code

        body:after {
            content: "";
            background-image:url('http://www.w3schools.com/css/klematis.jpg');
            background-repeat:repeat;
            background-position:center;
            background-attachment:fixed;
            background-size:cover;
            opacity: 0.5;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;
        }

js bin demo http://jsbin.com/welcome/50098/

Cool :) The key thing is to use CSS "z-index" to leverage [CSS Layers](http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/) — paulsm4, Nov 17 '12 at 06:11

Roy Sonasish · Answer 2 · 2012-11-17T05:15:34.917

1

Try this

.bg {
    width:280px;
    height:100px;
    position:relative;
    display:block;
}

.bg:after {
    background: url(https://www.google.co.in/images/srpr/logo3w.png);
    opacity: .5;
    width:280px;
    height:100px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    content: "";
}

here is jsfiddle File

edited Nov 17 '12 at 05:15

answered Nov 17 '12 at 05:04

Roy Sonasish

4,571
20
31

score 1 · Answer 3 · answered Nov 17 '12 at 05:17

Option1: Use faded background so that the text you will write or images that you use will be readble.

Option2: Your Body tag have image and div with class bgopc will be on top of that with white color and reduced opacity... so your image will become transparent. Now other div with id container will act as container for your images and content.

<body>
   <div class="bgopc">&nbsp;</div>
   <div id=container>Add your Text and Images inside this container </div>
</body>

Now CSS will be

body {background-image:url('islandbeach.jpg');background-repeat:repeat;background-position:center;background-attachment:fixed;background-size:cover;}
.bgopc{max-height:100%;background:#fff;position:absolute;top:0;left:0;width:100%;
height:100%;opacity:0.4;filter:alpha(opacity=40);z-index:1}
#container{z-index:2;position:relative}

I hope it will solve your problem.

Is there an HTML code that can make my background picture transparent and my text non-transparent?

3 Answers3

Linked