Jump to content
  • 0

Не понимаю как применить спрайт для фона


Temik2704
 Share

Question

День добрый!

Не получается применить спрайт шириной 2px и высотой 300px для левого и правого блока (спрайт состоит из 2 полос по 1ому пикселю разных цветов).

Подскажите ошибку.

 

http://jsfiddle.net/yB7SK/

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

    • By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • By IT Курсы Avenue
      IT - Avenue – курсы программирования в аудиториях и онлайн.
      Реальный выпускной проект и подготовка к трудоустройству!
       
      Avenue – современный центр подготовки IT-специалистов. Наши курсы – настоящая пошаговая инструкция о том, как стать крутым IT-специалистом и зарабатывать в $!

       
      Направления:
      Программирование (Java, PHP, Python, Scala, C++, C#, Javascript)
      Веб-разработка
      Разработка игр на Unreal Engine
      Мобильная разработка: Android, iOS (Swift)
      Робототехника
      Blockchain
      Дизайн: графический и Web-дизайн
      Тестирование: Тестирование ПО и Автоматизированное тестирование
      Разработка сайтов: интернет-магазины, CMS Wordpress, HTML+CSS
      Маркетинг: SMM, Интернет-маркетинг, контекстная реклама
      IT и администрирование: проектный менеджмент, IT –рекрутинг
      Excel (Продвинутый уровень – работа с формулами)

       
      Почему именно IT Школа Avenue?
      Обучение на практике.
      Независимо от курса, мы обучаем студентов ТОЛЬКО на практике! Искренне верим в догму практического применения знаний и предпочитаем «закреплять на практике» все приобретённые навыки.
      Преподаватели – реальные айти-шники, маркетологи и менеджеры.
      Первое правило эффективного обучения – компетентный специалист. Мы не сотрудничаем с преподавателями ВУЗ-ов и со специалистами, чей суммарный опыт работы в IT менее 5-ти лет. Главная цель IT Avenue – подготовка квалифицированных кадров для IT-компаний, которые готовы к решению рабочих задач сразу после выпускного.
      Обучение «с нуля»
      Учебная программа (независимо от курса) рассчитана на новичков, которые хотят освоить профессию «с нуля». Совершенно не стоит переживать за уровень своих начальных знаний. Даже если вы никогда не открывали среду разработки – наши преподаватели помогут вам разобраться во всех тонкостях новой IT-профессии.
      Единственное обязательное условие – желание обучится чему-то новому!
      Онлайн сертификат и помощь в трудоустройстве.
      Абсолютно все студенты получают на руки сертификат фирменного образца и его онлайн-копию, которую можно прикрепить к своему резюме.
      После окончания курса каждый студент получит уникальную возможность пройти 2-х часовой Интенсив по трудоустройству, на котором опытный рекрутер расскажет об ошибках на первом собеседовании; о том, что такое Качественное резюме и об общих правилах собеседования в IT-компании.
      Реальный финальный проект
      Каждый курс предполагает создание Финального Проекта. Финальный проект – это программа, написанная на одном из языков программирования, созданный студентом сайт, дизайн интерфейса или маркетинговая стратегия продвижения. На последнем занятии студенты вместе с преподавателем регистрируются на сервисах создания онлайн-портфолио и размещают туда свой первый учебный проект, который будет свидетельствовать о профессиональной компетентности студента.
      С нами не будет легко
      Да, мы можем использовать маркетинговый ход и написать «Стать программистом за пару недель? Легко, вместе с нами!», но мы хотим быть честными со своими студентами!
      Стать программистом трудно, но возможно! Вам придется: много учится, добросовестно выполнять домашние задания и повторно обрабатывать материал дома. Следуя всем нашим инструкциям и заданиям, вы будете готовы к реальному трудоустройству на 100%!
      Формат и условия обучения:
      занятие 2 раза в неделю по 2 часа в вечернее время: с 19:30 до 21:30 (дни занятий определяет группа)
      возможны разные варианты оплаты: «Оплата одним платежом» и «Оплата частями»
      возможность использовать учебный ноутбук
      кофе-бар для студентов IT Avenue
      Контакты:
      наш телефон: 8 917 552 03 33
      наш сайт: it.avenue-pro.ru
    • By wavelolmu
      Всем привет!

      Мне нужно сделать горизонтальное меню посередине страницы. Я его сделал и через <ul>, при этом width 100% и margin 0, но почему-то слева возник отступ от края страницы. Градиент на заднем плане - это background-image, и там болжны быть белые отступы, потому что картинка такая, а отступ у меню быть не должен..
      Не подскажите, как это исправить?  Код и скриншоты прилагаю.
       
      <body> <div class="topnav"> <ul> <li ><a href="default.asp" id="first">Л1</a></li> <li><a href="news.asp" id="second">Ф2</a></li> <li><a href="contact.asp" id="third">С3</a></li> <li><a href="about.asp" id="fourth">О4</a></li> </ul> </div> </body> body { background-image: url("https://sun1-20.userapi.com/c830108/v830108125/1c35a9/gYiNRO0w7sw.jpg"); background-size: cover; } .topnav { margin: 0 auto; } ul { list-style-type: none; position: absolute; margin: 0 auto; margin-top:23.5%; padding: 0 ; overflow: hidden; height: 83px; width: 100%; } li { float: left; display: inline; } li a { display: block; text-align: center; padding: 24px 34px; }  

    • By GrowStay
      Здравствуйте, у меня такая проблема. Я хотел сделать скролируемое меню с ссылками на ресурс. Написал команду, и т.д. Выучил только теги html, к CSS (или как там) даже не прикасался. Так как сделать скролируемое меню с ссылками, если это вообще возможно. Объясните пожалуйста. 
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy