• 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

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


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

1 ответ на этот вопрос

  • 0

 

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

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

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

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

 

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


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

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

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

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

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


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

Войти

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


Войти сейчас

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

    • Автор: abelausavaz
      На связи Z Wolves Development! Наш постоянный заказчик из Франции любит багеты, береты и классных фронт-эндов!
      Формат работы: только ремоут, только хардкор
      Занятость: полная (40-часовая рабочая неделя)
      Зарплатная вилка: почасовой рейт 8-9$
      Описание : ищем человека с 1,5+лет HTML/CSS, опыт с ReactJS, AngularJS (либо другими современными фреймворками)
      Также знания jQuery, Sass/Less; Grunt/Gulp; Node.js, опыт с VCS (SVN/Git и т.п.) графические редакторы
      Английский — не ниже Intermediate, с разговорным
             Контакты для связи:
             Telegram @abelausavaZ
             skype:live:a.belousova_2
    • Автор: Goodman-77
      Здравствуйте! 
      Помогите с решением. 
      Подскажите, можно ли сверстать стрелку на псевдоэлементе? 
      https://prnt.sc/gb74sc
      https://prnt.sc/gb7kos
    • Автор: ErUnDAK
      Надеюсь, смогу объяснить, чтобы меня поняли:
      Наткнулся на один сайт (http://sheltertheanimation.com/), на нём есть тег <section>, что используется на сайте. И вот при прокрутке страницы фон этой секции не подвижен, а сами элементы, типо: <h1>, <p> подвижны. У меня просьба и вопрос: 
      Дайте мне ссылку на статью по подобной ситуации, ибо очень заинтересовала, и объясните мне предназначение тега <section>, ведь я мог вместо него использовать тот же самый <div>.