Skip to content Skip to sidebar Skip to footer
Home / Background Image / Css / Html

Is There An HTML Code That Can Make My Background Picture Transparent And My Text Non-transparent?

Post a Comment
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

Solution 1:

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/


Solution 2:

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


Solution 3:

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.


Post a Comment for "Is There An HTML Code That Can Make My Background Picture Transparent And My Text Non-transparent?"