CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
csf
csf

Reputation: 13

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

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. The image look really much like this: enter image description here It's totally left positioned and there is text next to her. (There is also a bit of a place between the image and the text and also between the text and the end of the screen in the right. The picture starts in the left where the screen starts.)

I also want everything to be responsive ofc.

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!!!

.section_1 {
  position: relative;
  color: #fff;
  background-color: #bdbdbd;
}
.picture {
  content: url(https://i.sstatic.net/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;
}
<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>

Upvotes: 1

Views: 2738

Answers (4)

Miksha
Miksha

Reputation: 11

When using Bootstrap as in rraman's answer: because text can have more content that just one "Lorem ipsum," and height of the text div would become greater on smaller screens, your image, even though having class img-responsive (img-fluid), would be left with white space below. To remedy this problem you could use this css on img:

height: 100%;
width: 100%;
object-fit: cover:
object-position: 50% 50%; //for always to show image center

Upvotes: 0

rraman
rraman

Reputation: 216

In bootstrap 3.x ".row-fluid" class has changed to ".row" and ".span*" classes have been changed to ".col-*". I have made few changes to your code and made it to behave as given in your image link, please click here for plunker demo.

HTML file:

<section class="section_1">
<div class="container-fluid picture">
    <div class="row ">
        <div class="col-sm-5">
          <img src="https://i.sstatic.net/Zlrxu.png" class="img-responsive"/>
        </div>
        <div class="col-sm-7 text"><p>Lorem ipsum</p></div>
    </div>
    </div>

CSS file:

.section_1 {
color: #fff;
background-color: #bdbdbd;}

.text {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
vertical-align: middle;}

Upvotes: 1

csf
csf

Reputation: 13

I would like to have something like this: NORMAL And in mobile view something like this: MOBILE

But many thanks anyway! :)

Upvotes: 0

John Cena
John Cena

Reputation: 45

I don't know exactly what you are meaning but here's what I think you mean. JsFiddle

:)

Upvotes: 0

Related Questions