выравнивание изображения в header по центру

[red123]

Добрый день. Подскажите пожалуйста как добавить в шапку (header) изображение так, что бы оно выравнивалось по центру при любом размере окна браузера.

пока все вот в таком виде, но не работает. Картинка есть но все время по левому краю выравнивается.  

 

html:

<header>
 <div class="img">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
            <?php if ($home == $og_url) { ?>
              <img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
            <?php } else { ?>
              <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
            <?php } ?>
          <?php } else { ?>
            <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
      <div class="col-sm-5"><?php echo $search; ?>
      </div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
    </div>
  </div>
 </div>
</header>

 

css:

.img {
 
 background-image: url(/image/hop2.jpg);
 background-repeat: no-repeat;
 text-align: center;
 height: 250px;
 display: block;
 margin: 0 auto;
}

[jaffagold]

background-position: center;

[alena967]

Уберите все стили в css с этого img и добавьте класс center-block

 

[jaffagold]

и еще, когда отцентруете фон, проследите за его размером.

http://htmlbook.ru/css/background-size

 

[alena967]

зачем использовать css свойство background-image у тега img?

[red123]

1 час назад, alena967 сказал:

зачем использовать css свойство background-image у тега img?

можно было просто сделать background?

[red123]

4 часа назад, jaffagold сказал:

background-position: center;

помогло, спасибо.

про размер тоже на до не забыть.

Будет ли это работать если вообще убрать этот div img, и так же выровнять фон в header'е?

[red123]

4 часа назад, alena967 сказал:

Уберите все стили в css с этого img и добавьте класс center-block

 

не совсем понял, в html добавить  "класс center-block"?

[zlatoff]

@red123 вы всех, дающих вам совет, запутали своим говнокодом. Надо же тэгу img присвоить в css бэкграунд! Я конечно понимаю что это новое слово в html верстке, но все таки пролейте свет - что вы хотите отцентровать: изображение или бэкграунд??

[alena967]

2 часа назад, red123 сказал:

не совсем понял, в html добавить  "класс center-block"?

тэгу img добавить класс center-block

 

в стилях вообще убрать все это

8 часов назад, red123 сказал:

css:

.img {
 
 background-image: url(/image/hop2.jpg);
 background-repeat: no-repeat;
 text-align: center;
 height: 250px;
 display: block;
 margin: 0 auto;
}

 

[jaffagold]

Ребята, разуйте глаза.

Там нет ТЭГа img

Там есть класс .img

Ну, захотелось человеку

[alena967]

В 03.06.2018 в 09:15, red123 сказал:

<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
            <?php } ?>

Разули, вы тоже посмотрите

 

В 04.06.2018 в 12:54, jaffagold сказал:

Ребята, разуйте глаза.

Там нет ТЭГа img

 Там есть класс .img

Ну, захотелось человеку

 

[jaffagold]

А причем тут логотип к фону всего хэдера?

Цитата

Добрый день. Подскажите пожалуйста как добавить в шапку (header) изображение так, что бы оно выравнивалось по центру при любом размере окна браузера.

пока все вот в таком виде, но не работает. Картинка есть но все время по левому краю выравнивается.  

 

html:

<header>
 <div class="img">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">

и т.д.

а потом стили

css:

.img {
  background-image: url(/image/hop2.jpg);
 background-repeat: no-repeat;

и т.д.

Где лого и где div.img