Geek Answers Handbook

Is there any HTML code that can make my background image transparent and the text opaque?

Ok, so I typed the HTML code for the technology class, which I need to satisfy for my basic education. 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 wilted so that I can see the text and the other image that I have. The background is too bright to see words without the need to mow. Are there any HTML codes that can do this for me? I am not a professional in this matter, I just followed everything that my professor told me to explain this, please explain things in children's steps, if you have an answer. Thank you very much!

+2
source share
3 answers

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/

+1
source

try it

 .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 jsfiddle file

+1
source

Option1: Use a faded background so that the text you write or the images you use are read.

Option 2: your Body tag has an image and a div with the bgopc class will be on top of it with white color and reduced opacity ... so that your image becomes transparent. Now another div with id container will act as a 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>

CSS will now

 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 this solves your problem.

+1
source

More articles:


All Articles