Выровнять изображение вверху справа

Question

У моего сайта есть логотип с изображениями с обеих сторон. Я знаю ширину и высоту логотипа, но изображения меняются. Я поместил изображение в верхнем левом углу и сделал поле 10px. Теперь я хочу сделать то же самое для другой стороны, но она не работает. Я сделал свойство background-position и установил его справа вверху, но оно ничего не сделало. В чем проблема?

CSS

#leftpic {
   background-position: left top;
   background: url('Images/left_pic.png') no-repeat;
   height : 133px;
   padding : 0;
   margin: 10px 10px 10px 10px;
   width: 138px;
}

#rightpic {
   background-position: top right;
   background: url('Images/left_pic.png') no-repeat;
   height : 133px;
   padding : 0;
   width: 138px;
}

#masthead {
   background-position: center bottom;
   background: url('Images/logo.png') no-repeat center bottom;
   height : 160px;
   padding : 0;
   margin: 10px auto 0 auto;
   width: 910px;
}

HTML

<div id="masthead">
   <div id="leftpic"></div>
   <div id="rightpic"></div>
</div>

Answer 1

Добавьте float: left и float: right к вашим leftpic и rightpic идентификаторам:

#leftpic {
background-position: left top;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
margin: 10px;
width: 138px;
float: left;
}

#rightpic {
background-position: top right;
background: url('Images/left_pic.png') no-repeat;
height : 133px;
padding : 0;
width: 138px;
float: right;
margin: 10px;
}

В соответствии с передовой практикой CSS, я предлагаю также использовать класс masthead-image для содержания CSS, который будут использовать правое и левое изображения:

CSS:

.masthead-image {
    width: 138px;
    height: 133px;
    margin: 10px;
    padding: 0;
}

#leftpic {
    background: url('Images/left_pic.png') no-repeat left top;
    float: left;
}

#rightpic {
    background: url('Images/right_pic.png') no-repeat right top;
    float: right;
}

#masthead {
    background: url('Images/logo.png') no-repeat center bottom;
    height : 160px;
    padding : 0;
    margin: 10px auto 0 auto;
    width: 910px;
}

HTML:

<div id="masthead">
    <div id="leftpic" class="masthead-image"></div>
    <div id="rightpic" class="masthead-image"></div>
</div>