1

For responsive images, I am using the CSS properties background-image and background-size. This allows the image to automatically resize when the browser window is resized. The problem is, content below the image is not also resizing. For example, in this set up I have an image above a paragraph of text:

<div class="container">
    <div class="image></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>

For the CSS I have: 

.container {
    width: 50%;
}

.image {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 350px;
}

When the browser is adjusted, the image also is adjusted but since there is a set height to the image (350px), a gap forms beneath the image and the paragraph. Are there some CSS changes I can make that will allow the paragraph to stay directly under the image when the image is resized?

Here is a jsFiddle example http://jsfiddle.net/qKGt9/

user715564
  • 1,650
  • 2
  • 25
  • 60

5 Answers5

2

You should not be using an image as a background if you want text to flow around it. Responsive design techniques will typically employ this trick to IMG elements:

/* Responsive image CSS */
img {
  width: 100%;
  height: auto;
}

I've forked your fiddle for a working example: http://jsfiddle.net/WDFBR/

It requires some slight changes to your HTML structure and CSS. The main thing is that I'm using an IMG element instead of a DIV to display your image. Take a look at the goods under the hood of popular frameworks like Twitter Bootstrap and you'll learn a lot about good responsive design.

Rick Buczynski
  • 827
  • 8
  • 23
1

Does this fit the requirements?

.image {
    background: url('http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1') no-repeat;
    background-size: 100%;
    padding-top: 66.667%; /* holds 3:2 aspect ratio */
}

Fiddle

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
0
<div class="container">
<div class="image>
<img src="image path" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>

</div>

try this..

Tashen Jazbi
  • 1,068
  • 1
  • 16
  • 41
  • And the CSS to go with that? – Maple Jul 22 '13 at 18:00
  • change image size whatever you want paragraph will always be under it.what was wrong in previous one was that image was in div and paragraph outside the div.so image get always under the div not image.use that css which you were using before,it'll help :) – Tashen Jazbi Jul 22 '13 at 18:04
  • The OP's CSS used a div with a background image in order to take advantage of a certain auto-sizing method. If you simply move the text into that div, it will appear _over_ the image rather than below it. You were on the right track, just missing the CSS to auto-size the image for your particular HTML. – Maple Jul 22 '13 at 19:35
0

Put the actual image in the html code, and set the universal width of img elements to fill 100% width of their parent containers:

HTML:

<div class="image">
    <img src="http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1">
</div>

CSS:

img {
    width: 100%;
}

Fiddle:

http://jsfiddle.net/philsinatra/qKGt9/3/

Phil Sinatra
  • 419
  • 3
  • 11
0

Here is your 100% solution:

Follow below URL, I have just recently answered on the same question.

Responsive CSS background image - how to make content follow

If need more help, most welcome :)

Community
  • 1
  • 1
Sandeep Parashar
  • 54
  • 4