Вставить изображение с помощью CSS

Question

Я пытаюсь вставить изображение с помощью css. В Chrome он разложен по желанию.

CSS:

.logo { 
    content: url("../Icons/logo.png"); 
    width: auto; 
    height: 50px; 
    margin-top: 35px; 
    margin-bottom: 65px; 
} 

HTML:

<span class="logo pull-right"></span> 

Но в Firefox она не вставлена. Я попытался использовать: before pseudo class. Но размер изображения также следует учитывать. С псевдоклассом изображение не изменяется до желаемых размеров.

Есть ли лучший способ CSS для вставки изображений?

С уважением, Марко

Update

Мой логотип Изображение больше, то область, где он находится!

Вот скрипка ...

http://jsfiddle.net/mkeuschn/URu57/

Answer 1

Вы можете установить его в качестве background вместо content, проверка this fiddle:

.logo { 
    background: url("http://goo.gl/OJhO2s") no-repeat; 
    background-size: 250px 250px; 
    display: block; 
    width: 250px; 
    height: 250px; 
    margin-top: 35px; 
    margin-bottom: 65px; 
} 

И придав ему определенную width и height наряду со свойством отображения block (вы также можете использовать div для этого вместо диапазона).

Answer 2

Может попробовать это :before или :after,

.logo:before { 
    content: url("../Icons/logo.png"); 
    width: auto; 
    height: 50px; 
    margin-top: 35px; 
    margin-bottom: 65px 
} 

вместо

.logo { 
    ... 
} 

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Answer 3

Попробуйте использовать:

CSS:

.logo { 
    backgroud: url("../Icons/logo.png") no-repeat; 
    width: auto;/* specify the width */ 
    height: 50px; 
    margin-top: 35px; 
    margin-bottom: 65px; 
} 

Answer 4

Да: Лучший способ использовать

background: url("/Icons/logo.png") [parameters];