I'm trying to create a menu out of six buttons, placed upon a large background image. How do I get the link texts to stay inside the buttons? This is the code so far (I wish to keep using this "list method", cause I found it easier to understand than multiple div-statements inside two images...):

```css
ul
{
    padding:0px;
    margin:0px;
    width:510px;
    float:left;
    list-style:none;
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg);
    z-index:150;
}

ul li
{
    width:50px;
    height:100px;
    padding:20px;
    float: left;
    display:inline-block;
    z-index:100;
}
```

```html
<ul>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK1</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK2</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK3</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK4</li>
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK5</li>
</ul>
```