Fix the background-image so it fits the rounded corners

Question

Are there any way to fix the background image so it doesn't go outside the borders that are rounded? jsFiddle

Pure CSS solution is preferable.

The code is here:

<style>
div {
border-radius: 30px;
background-color: #dddddd;
margin:60px;
}

a{
position: relative;
display: block;
height: 90px;
padding: 15px;
background-image: url("http://dl.dropboxusercontent.com/s/stsc2r2vqd1y6ps/lab.png");
background-position: 0 top;
background-repeat: repeat;
}
</style>
<div><a href="#">some text</a></div>

Answer 1

This happens because you're not preventing the inner content from overflowing the boundaries of the divider. To fix this, simply add overflow: hidden to your div:

div {
    ...
    overflow: hidden;
}

Answer 2

Apply the background image to your div container, I've modified your jsfiddle:

div {
border-radius: 30px;
background-color: #dddddd;
background-image: url("http://www.moveoneinc.com/blog/wp-content/uploads/2011/12/Dog-2.jpg");
background-position: 0 top;
background-repeat: repeat;
margin:60px;
}

a{
position: relative;
display: block;
height: 90px;
padding: 15px;
}

The other image you had didn't work, so I changed it.. EDIT: Someone got me by 1 sec, I think that the overflow solution is also valid :)