开发者

I can't get this picture in the background of my div

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/bla开发者_StackOverflow社区ck_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


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.


EITHER:

Your image doesn't exist at this relative path: ../images/box/black_bottom.png.

OR:

Your image is blank.

OR:

Your image has more blank space in the image's left bottom corner than the dimensions of your div.rounded_corners, and therefore the background image "overshoots" your div.


HI...

This might give you something to have a look at...

<html>
<head>
<style type="text/css">
    #mydiv{
        background-image:url('http://www.theregister.co.uk/Design/graphics/std/logo_414_80.png');
    }
</style>
</head>
<body>
<div id="mydiv">
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
<p>Mary had this little lamb...</p>
</div>
</body>
</html>

Just something to get you started.

Also, your div#blockdark doesn't validate - use #blockdark instead...

(The id should be unique, so tag type doesn't matter)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜