Question

Can someone point me in the right direction? I don’t see why I can’t get the black_bottom.png as background in rounded corners.

@charset "utf-8";

/* CSS Document */

html,
body {
  color: #444141;
  font-family: 'trebuchet ms' !important;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: #eaeade;
}

.justyParagraph {
  text-align: justify;
}

a img {
  border: 0;
}

.clearer {
  clear: both;
}

.rounded_corners {
  background: url(../images/box/black_bottom.png) no-repeat left bottom;
  color: #FFF;
  padding: 8px;
  width: 380px;
  border: 2px solid #4e4b4b;
  height: 450px;
}

div#blockdark {
  height: 517px;
  left: 450px;
  position: absolute;
  top: 130px;
  z-index: 1000000;
  width: 360px;
  visibility: visible;
}

<div id="blockdark">
  <div class="rounded_corners">
    Content
  </div>
</div>

This is an example, maybe it has something to do with the JavaScript for rounded_corners class?

http://www.coldcharlie.nl/test

Answer 1

Be sure that ../images/box/black_bottom.png is the path from your stylesheet to the image file. Everything else looks correct, but people don’t always realize that paths are relative to the css file and not the page that includes it.

Try an absolute URL there and see if it appears then. If it does, you know your relative URL isn’t right.