CODEWITHSUNDEEP
htmlcssbackground-image
clement
clement

Reputation: 4266

How wrap a picture (currently in background) with text

I have a picture that I set as background image, and I want to disallow tha fact that the text override the picture. In addition to that, below the picture, the text has to take the full-width, and the whole text is in the same paragraph!

The website is for mobile devices, so I think that flex box is not the right choice for all devices!

The picture size is 64*64 and it can't be other size!

http://jsfiddle.net/RF8b7/ or this is my current code

<div id="mydiv" class="myclass">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>

#mydiv{
background: transparent url(../contents/Picture.png) no-repeat 10px 0;
background-size: 64px 64px;}

How can I do?

Thanks in advance

Upvotes: 0

Views: 61

Answers (2)

hkk
hkk

Reputation: 2149

Option 1

You can add another image to the document with an img tag, visibility: hidden, and float:left, and it will work the same. Demo

Option 2

If you place the image separately from the text, then you can use float: left; and the text will go around it. Demo

HTML

<img src="http://i.telegraph.co.uk/multimedia/archive/01854/readers-moon-1_1854200j.jpg">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

CSS

img{
  float: left;
}

Explanation
Setting an image as the background image for a div containing text is normally a bad idea (unless you want it as a background). Separating the image and the div into separate containers allows you to have more control over the positioning.

Upvotes: 1

web-tiki
web-tiki

Reputation: 103780

This is the simplest way I can think of :

FIDDLE

HTML:

<div id="mydiv" class="myclass">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01854/readers-moon-1_1854200j.jpg"/>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>

CSS :

img{
    float:left;
}

Upvotes: 1

Related Questions