Как переместить картинку?

Question

[Alexandr Lebedev]

Суть вопроса в том, что картинка вот такая(оригинал)

Вот как она отображается на странице:fess.in.net/landing-pages

Нужно сделать так, чтобы клавиатура с руками была по середине...
Буду очень благодарен за помощь!!

Answer 1

[Александр Тарасов]

1) Если использовать картинку как background, то задать позицию фона. например так:

.selector{
    background: center center #fff url(/path/to/image.png) no-repeat; /* полный синтаксис*/
    background-position: center center; /*только позиция*/
}

2) Если используете картинку как img, то выравнивайте её используя абсолютное позиционирование

Comments

[Alexandr Lebedev]

Не до конца понял " Если используете картинку как img, то выравнивайте её используя абсолютное позиционирование " тоесть через position absolute ?

[Владислав Бойченко]

Также можно использовать для этой картинки, если она фоновая background-size: cover

[Alexandr Lebedev]

Владислав Бойченко: А если стандартная?

[Владислав Бойченко]

Alexandr Lebedev: так как вы верстаете на bootstrap (судя по разметке), идеальный вариант таков:

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<img src="img/logo.png" alt="logo" class="img-responsive">
		</div>
	</div>
</div>

Оно само все выровняет и подстроит.

[Александр Тарасов]

Alexandr Lebedev: да, position: absolute, а родителю relative. Потом выравниваете left, top и margin-left если надо

Answer 2

[profesor08]

В вашем случае лучше будет

background: url(http://fess.in.net/wp-content/uploads/2016/01/ban-01.png) no-repeat;
    background-size: contain;