How to make image and text responsive next to each other on a background?


#1

Hello Everyone,

I am completely new to bootstrap, have been working with it for like a week. I am currently working on a Christmas gift to my girlfriend and I am really stuck.

I want to place a picture and a short text (next to each other) on a background.
I want it to look something like this:

On mobile, something like this:

http://i.stack.imgur.com/6IQgl. png (delete space before png)

Here is my code:

CSS:

.section_1 {
  position: relative;
  color: #fff;
  background-color: #bdbdbd;
}
.picture {
  content: url(http://i.stack.imgur.com/Zlrxu.png);
  width: 50%;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.text {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 20px;
}

HTML:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="section_1">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="picture">
        <div class="span2">
        </div>
        <div class="span10">
          <div class="text">
           <p>Lorem ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

I tried everything but it never really worked and I wasted like 2 days on this issue. I really can't make it alone! PLEASE HELP!!!


#2

html:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>


<p>Lorem ipsum</p>
</body>
</html>

css:

body {
background: url(http://i.stack.imgur.com/Zlrxu.png)
no-repeat;

}

p {
font-size: 30px;
margin-top: 300px;
margin-left: 400px;
font-family: helvetica;
}

it's a very basic version of it, but I hope you can understand what happened there.


#3

How to post code in this forum.