Перейти к содержанию
red123

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

Рекомендуемые сообщения

Добрый день. Подскажите пожалуйста как добавить в шапку (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;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

background-position: center;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, alena967 сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 часа назад, jaffagold сказал:

background-position: center;

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 часа назад, alena967 сказал:

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Там нет ТЭГа img

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Цитата

Добрый день. Подскажите пожалуйста как добавить в шапку (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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.