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!
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/
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
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"> </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.
