Thing what you can do with your CSS is:
#background {
background-color:rgb(30, 30, 30);
overflow: hidden;
}
.image {
height:140px;
background-size:cover;
background-position-x:center;
background-position-y:center;
display:block;
float: left;
}
#text p {
width:210px;
padding:20px;
float: left;
}
First set float to left to your image and paragraph.
After set background div overflow to hidden.
If you would like to move into the center your div you have to create an inner div like this with a class (in this case called center):
<div id="background">
<div class="center">
<div id="text">
<p>My text</p>
</div>
<img class="image" src="banner.jpg" />
</div>
</div>
And allow the following CSS to center class:
.center {
width: 30%;
margin: 0 auto;
}