views:

51

answers:

1

Hi, the title says it all,

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

Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?

This is the css:

   @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/achtergrond_homepage.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;


    }

This is the HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Test</title>
    <link rel="bookmark" href="/favicon.ico" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
            <script src="js/excanvas.js" type="text/javascript"></script>
            <script src="js/jQuery.min.js" type="text/javascript"></script>
            <script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>    

            <script type="text/javascript">
              $(window).load(function(){
                $('.rounded_corners').bg(['20px', '20px', '20', '20']);
            });
            </script>
</head>

<body>
<div id="blockdark"> 
<div class="rounded_corners">

 <div>   <h1> Title </h1> </div>

 <div> Content </div>


</div>
</div>
</body>
</html>

This is a example, maybe it has something to do with the javascript for rounded corners?

http://www.coldcharlie.nl/test/

A: 

Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners

jackbot
I fixed it and added the display:block, nothing happens.
Chris
I left the javascript part out and solved it with a png.
Chris