How to put text on img, and make the image transparent

Question

I was looking around but didn't find what I need. I have place to write only a html. (can't create JS or different file for css)

I want to put an image on the screen, to be able to change the image opacity, and also put text on the image.

I tried this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("paper.gif");
    opacity: 0.1;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

But the opacity seems to be on the text and not on the image.

Can someone help me please? Thanks All!

I'm not exactly sure of what you want, but it *might* be [this](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements). — JCOC611, Jan 15 '15 at 16:57
The `opacity` will affect all the container elements, including text. — emerson.marini, Jan 15 '15 at 17:01

score 1 · Answer 1 · answered Jan 15 '15 at 17:03

The opacity property applies to the foreground elements in you body, not to the background image. Now, the easiest solution to this would just be using PNG, which allows you to use an alpha channel that allows for arbitrary levels of opacity. Since you can't use JS, I guess you want it to be static, anyways.

Another option would be to simply put the image as an object on the page (<img ... />), give it a style with a limited opacity, and put it in the background, whilst giving the body background a color of rgba(0,0,0,0).

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: rgba(0,0,0,0);
}
.halftransparent {
    opacity: 0.2;
    position: absolute; 
    /* position correctly here */
}

</style>
</head>
<body>
<img class="halftransparent" src="whatevs.jpg" alt="this is a nice background image" />
<h1>Hello World!</h1>

</body>
</html>

score 1 · Accepted Answer · answered Jan 15 '15 at 17:05

There is no proper way to add an opacity to a background image. The best thing to do is to fake an element over the background using css for after. It would be more proper to do this to a div though and have your text aligned over your div. I would also recommending setting background-repeat to no-repeat as well so only the one image will show and having the sizes be equal.

body::after {
  content: "";
  background-image: url(paper.gif");
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Here is the article this information comes from: here

score 1 · Answer 3 · answered Jan 15 '15 at 17:20

Try:

<!DOCTYPE html>
<html>
<head>
<style>

body {
margin:0;
padding:0;
}

h1 {
position:absolute;
top:0;
left:12px;
z-index:12;
height:36px;
line-height:36px;
}

main {
display:block;
position:absolute;
top:0;
left:0;
z-index:0;
width: 100%;
height: 100%;
padding:72px 12px;
background-image: url("paper.gif");
opacity:0.1;
}

</style>
</head>

<body>
<h1>Hello World!</h1>

<main>
CONTENT HERE
</main>

</body>
</html>

How to put text on img, and make the image transparent

3 Answers3