Hey there i am having an issue where i cannot get the text to have its own background to make it readable over the image.
i am unclear as to what to do.
Please understand this is the first site i have ever made and are 3 days in, so dont be too nasty hehe.

This is the HTML

```
<aside class="top-sidebar">
    <article>
    <h2></h2>
    <p>Lorem Ipsum has been the industrys standard dummy text.</p>
    </article>
</aside>

```

this is the CSS

```
.top-sidebar {
    border-radius: 2px;
   -moz-border-radius: 2px;
     -o-border-radius: 2px;
-webkit-border-radius: 2px;
    padding: 1% 5%;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 0.5%;
    width: 29.5%;
    height: 160px;
    float: left;
    background: #fff url(Images/socialnight.jpg) no-repeat ;
    background-size: 100% 100% ;
    background-position: 0% 0%;

}

.top-sidebar article {
position: relative;
    top: 30px;
    right: 0px;
        left: 45%;
        width: 60%;
        font-size: 90%
}

p span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

```