Can't put image behind text in html and css

Question

Hello1 I'm working with a html and css project. I want to create a box for text which has an image in background like in this image: The result I get is this:

.background {
  background: url(background.png) repeat;
  border: 2px solid black;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.4;
  -webkit-filter: sepia(100%);
  /* Chrome, Safari, Opera */
  filter: sepia(100%);
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background">

  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

Is there something I should change in my code? My image background.png exists in the folder where I have the html file. Thanks!

Is the CSS file in the same folder the html file exists? Do you use css file or direct style tag? — Mojtaba, Aug 09 '16 at 21:49
just tested, your code is fine, check whether your 'background.png' exists in the same folder — lucas, Aug 09 '16 at 21:51
For sure, you have problem with the path. Tell us what is the folder/file structure of html,css,image files? — Mojtaba, Aug 09 '16 at 21:58

Mojtaba · Accepted Answer · 2016-08-09T22:00:29.157

2

When you use this in your css file:

background: url(background.png) repeat;

That means the image is in the same folder as the css file.

if the image is in a folder upper of the css file, use this"

background: url('../background.png') repeat;

Also, if you are trying on a Linux OS, care about the upper/lower cases of name of files

Thanks @StephenP for putting the complete message:

paths in CSS files are relative to the style sheet, not relative to the document

edited Aug 09 '16 at 22:00

answered Aug 09 '16 at 21:51

Mojtaba

4,852
5
21
38

1

I think you should explicitly state this rule in your answer: "`url()` paths in CSS files are relative to the style sheet, not relative to the document"_ — [from the W3 as cited in another SO answer](http://stackoverflow.com/a/940475/17300) – Stephen P Aug 09 '16 at 21:58
@StephenP, I meant what you said. But, your message is more clear. I updated my answer – Mojtaba Aug 09 '16 at 22:02

score 1 · Answer 2 · answered Aug 09 '16 at 21:52

1

if your file structure looks like this:

index.html
css/style.css
img/background.png

you should link to background like this: url('../img/background.png') ".." will go back to parent folder

https://jsfiddle.net/cnLjf8e5/

answered Aug 09 '16 at 21:52

kuchar

607
1
8
23

score 0 · Answer 3 · answered Aug 09 '16 at 21:47

0

The main problem could be this

  background: url(background.png) repeat;

System can't find this picture, try it like this

background-image: url("background.png") repeat;

And be sure, that this image is in this location

answered Aug 09 '16 at 21:47

F1dzh

74
9

It still doesnt work. Yes the background.png image is in the same folder as the html file but not the css file – coolest Aug 09 '16 at 21:49
And if you change 100% to some pixels? If that doesn't work try this `background: url("background.png") repeat !important;` – F1dzh Aug 09 '16 at 21:54
@Kyrgios ... it's still not going to work by specifying pixels. Mojtaba's answer is correct — the path given in a `url(...)` within a CSS file is a path _relative to the CSS file location._ – Stephen P Aug 09 '16 at 21:55

Can't put image behind text in html and css

3 Answers3