Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
sidsych
0 / 0 / 0
Регистрация: 14.02.2020
Сообщений: 1
1

background-image

14.02.2020, 14:45. Просмотров 142. Ответов 2

Здравствуйте, уважаемые веб-мастера.
Я учусь в Skillbox, на данный момент выполняю домашнюю работу по модулю css.
У меня не получается привязать иконку сайта при помощи background-image.
Вернее, получается ее отобразить, но она выходить за пределы контейнера и перемещаться, туда куда нужно не хочет.
Рядом с иконкой должен быть текст, но т.к она привязана фоном, то текст отображается на ней. Как его оттуда убрать?
Помогите пожалуйста.
Пробовал просто вставить как картинку - все двигалось, вставало, куда нужно. Но так ведь неправильно.

Код:
html:
HTML5
1
2
3
4
5
6
7
8
9
    <header>
        <div class="fixed-container">
            <a href="#" aria-label="News"> <img id="logo" src="img/logo.png" alt="logotip"> </a>
        </div>
        <div class="weather">
            <span>+22°C</span>
        </div>
    
    </header>
css:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.fixed-container {
    width: 1000px;
    margin: 0 auto;
    position: relative;
 
}
 
header {
    margin-top: 40px;
    height: 170px;
}
 
.weather  {
    background-image: url('img/icon-weather.png');
    background-repeat: no-repeat;
}
0
Миниатюры
background-image   background-image  
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.02.2020, 14:45
Ответы с готовыми решениями:

Работа с background-color,background-image
Добрый день ув. пользователи! Подскажите пожалуйста, можно как-то сделать, что бы div, которому...

Очередность border-image и background-image у вложенных элементов
Я работаю с одной графической библиотекой для настольных приложений, в которой пользовательский...

Background и background-image
Добрый день ув. пользователи! Подскажите пожалуйста какие свойста в css отвечают за изменение...

Background-image
Доброго дня. Как начинающий хотел спросить: браузер не видит обьединенные свойства...

Background-image
Сайт на Joomla. Шаблон protostar. Вернее скопировал шаблон, переименовал все названия protostar на...

2
novichek_1905
411 / 295 / 130
Регистрация: 16.02.2018
Сообщений: 831
14.02.2020, 18:14 2
sidsych, вы присваиваете фон, блоку, который существенно больше изображения, и никак его не позиционируете.
проще всего создать блок, рядом с цифрами (температура), который будет по ширине и высоте соотвествовать размерам фоновой картинки 1в1. И уже ему вы будете задавать свойство background-image: url('img/icon-weather.png');
то есть у вас получиться примерно следущее
HTML5
1
2
3
4
5
6
7
8
9
10
    <header>
        <div class="fixed-container">
            <a href="#" aria-label="News"> <img id="logo" src="img/logo.png" alt="logotip"> </a>
        </div>
        <div class="weather">
             <span class="icon"></span>
             <span>+22°C</span>
        </div>
    
    </header>
CSS
1
2
3
4
5
6
.icon  {
    background: url('img/icon-weather.png') no-repeat center center;
    width: 30px; //тут ширина вашей картинки
    height: 30px; //тут высота вашей картинки
    display: block;
}
останется только разместить блоки на линии, просто зададите блоку weather свойство display: flex;
1
Flexinas
0 / 0 / 1
Регистрация: 08.05.2019
Сообщений: 25
15.02.2020, 19:45 3
Да хорошее и простое решение.
0
15.02.2020, 19:45
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.02.2020, 19:45

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

background image
Доброе время суток! Народ, как сделать что бы background image растягивался по размеру окна в...

Background-image
В каких случаях background-image работать не будет то что у меня частенько с ним проблемы,...

Background-image
Почему в первом варианте картинка не подстраивается по размеру экрана, &lt;!DOCTYPE html&gt; на это же не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.