CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Questions
Questions

Reputation: 11

Bootstrap and Image Wrap

I have no code for this but having searched the internet I feel that what I wish to do is not going to be possible. I would like to do is wrap text around an image that is not a rectangle. Things like this JS JSWrap or this solution on Stackflow do not seem to work in a responsive website. Has anyone got a solution for me? Thanks.

Upvotes: 1

Views: 181

Answers (1)

Rich
Rich

Reputation: 3336

You can achieve this result using the CSS shape-outside property. The property works on floated elements, and can be animated with transitions. There's a url() value you can use for images, or you can set a background-image as I have in this example.

You can learn more about the property here.

Hope it helps!

body {
  margin: 15px;
}

.top-shape {
  shape-outside: circle(50% at 10px 10px);
  float: left;
  clip-path: circle(50% at 0 0);
  width: 300px;
  height: 300px;
  background: url(https://journalismfrommars.files.wordpress.com/2015/01/mars-no-background.png?w=2880&h=1800) 50% 50% no-repeat;
}

.p1 {
  text-align: justify;
}
<div class="main">
<div class="top-shape"></div>
<div class="btm-shape"></div>
<p class="p1">Rich in heavy atoms intelligent beings Apollonius of Perga. Shores of the cosmic ocean Orion's sword descended from astronomers courage of our questions, hundreds of thousands billions upon billions vanquish the impossible, preserve and cherish that pale blue dot colonies? Inconspicuous motes of rock and gas billions upon billions the carbon in our apple pies. Intelligent beings, emerged into consciousness billions upon billions at the edge of forever vanquish the impossible kindling the energy hidden in matter light years dream of the mind's eye vanquish the impossible rich in heavy atoms! Rich in heavy atoms intelligent beings Apollonius of Perga. Shores of the cosmic ocean Orion's sword descended from astronomers courage of our questions, hundreds of thousands billions upon billions 
</p>
</div>

Upvotes: 2

Related Questions