• 0
vladimirte

Проблемы с вставкой изображения

Вопрос

у меня есть список:

<nav>
        <ul class="navigation">
            <li><a id="link" href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li class="cb"><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
        </ul>
    </nav>

и есть стили которые меняют список:

nav .navigation li a{
    background: url(../img/home.png);
    color:#4CB0D4;
    text-decoration: none;
    text-align:center;
    display: block;
    background: #ffffff;
    height: 30px;
    width: 170px;
    padding-top: 70px;
    font-size: 20px;
    font-family: "BebasRegular";
    border-radius: 4px;
}

Проблема в том, что у меня не вставляется изображение в блок, правило background есть а изображение нету.

Когда делаю id элементу <a>, и делаю ему правило #id {background:url...} тогда у меня изображение ложится на левый верхний угол, и белый фон блока превращается в синий как фон.

Я подазреваю что проблема в том, что я неправильно задал правила для навигации, вот код:
 

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>@import url(css/style.css)</style>
</head>
<body>
<div id="wrap">
    <header>
        <div class="header_top">
            
        </div>
    </header>

    <nav>
        <ul class="navigation">
            <li><a id="link" href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li class="cb"><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
        </ul>
    </nav>

</div>

</body>
</html>

и css
 

head,body{
    margin:auto 0;
}
body{
    background: url(../img/white-severance.png);
}
#wrap{
    height: 600px;
    margin: auto 0;
}
header{
    min-height: 300px;
    max-height: 300px;
    background: #FFFFFF;
}

nav{
    min-height: 350px;
    max-height: 350px;
    background: #4CB0D4;
    overflow: hidden;
}

nav .navigation{

    margin-left: 15px;
}
ul{
    list-style: none;

}
nav .navigation li{
    display: block;
    float: left;
    padding: 30px;
}
nav .navigation li a{
    background: url(../img/home.png);
    color:#4CB0D4;
    text-decoration: none;
    text-align:center;
    display: block;
    background: #ffffff;
    height: 30px;
    width: 170px;
    padding-top: 70px;
    font-size: 20px;
    font-family: "BebasRegular";
    border-radius: 4px;
}
.navigation .cb{
    clear: both;
}
ul .sell a{
    background: url(../img/home.png) no-repeat;
}
#link{
}

@font-face {
    font-family: 'BebasRegular';
    src: url('../fonts/BebasRegular/BebasNeueRegular.eot');
    src: url('../fonts/BebasRegular/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/    BebasRegular/BebasNeueRegular.woff') format('woff'),
         url('../fonts/BebasRegular/BebasNeueRegular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

 

img.png

Изменено пользователем vladimirte

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


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

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

  • 0

 

5 часов назад, vladimirte сказал:

Проблема в том, что у меня не вставляется изображение в блок, правило background есть а изображение нету.

У вас второй background перекрывает первый:

nav .navigation li a {
  background: url(../img/home.png);
  /* ... */
  background: #ffffff;
}

 

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


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

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы