HTML/CSS - Крест с изображением в нем

Question

Я создал крест с css. Теперь я хотел бы поместить в него фотографию, проблема в том, что крест содержит до: и после: div, поэтому его невозможно поместить в него.

Вот мой jsbin: http://jsbin.com/iYogaCE/1/edit

Как я мог управлять этим? Или есть другое решение для создания такой формы?

Заранее благодарен!

Answer 1

Добавить background-position:center; в #cross:before, #cross:after

#cross { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

#cross:before, #cross:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    background-size:100px 100px; 
    background-image:url('http://www.gm-consult.de/uploads/pics/homer-simpson_20.jpg'); 
    background-position:center; 
} 

#cross:before { 
    left: 50%; 
    width: 30%; 
    margin-left: -15%; 
    height: 100%; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
} 

#cross:after { 
    top: 50%; 
    height: 30%; 
    margin-top: -15%; 
    width: 100%; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
}