CODEWITHSUNDEEP
htmlcsscss-floatbackground-image
Ilya
Ilya

Reputation: 29693

float of the background-image

I have the <div> with background-image css rule.
Html 

<div class="myclass">Hello world</div>

CSS 

.myclass
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    border: 1px red dotted;
}

JSFiddle DEMO

How can I make background-image inside div to float the text?

P.S:I cann't create another div (or another element) inside the currrent div

Upvotes: 2

Views: 6526

Answers (4)

Mr_Green
Mr_Green

Reputation: 41832

Add text-indent css property and also pin the background image to top so that if the text goes to second line, the background will not move.

.myclass {
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:2px 2px;
    border: 1px red dotted;
    text-indent:20px;
}

Working Fiddle

Upvotes: 2

Love Trivedi
Love Trivedi

Reputation: 4046

Use This CSS DEMO HERE

.myclass
{   
    border: 1px red dotted;
}
.myclass:before
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    padding-left:20px;
    content:'';
}

Upvotes: 0

Itay
Itay

Reputation: 16777

You can use the ::before pseudo element.

jsfiddle Demo

.myclass:before
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
}

The advantage of this method is that if there's a long text with multiple lines it will indent the text only on the first line.

Multiple lines jsFiddle Demo

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Add padding to the div to shift the text.

.myclass
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    border: 1px red dotted;
    padding-left: 20px;
}

JS Fiddle: http://jsfiddle.net/zqeTx/1/

Upvotes: 4

Related Questions