Как сделать картинку фоном

@Рикардо Милосс · Регистрация: 29.01.2019

Студворк — интернет-сервис помощи студентам

Как сделать так что бы при наведении курсора мыши на картинку она увеличивалась в размерах, а при клике по ней, она стала фоном???

@Mr_Sergo · 29.01.2019, 15:43

Сообщение от Рикардо Милосс

Как

Очень просто -> https://codepen.io/Mr_Sergo/pen/xMEGxq

HTML5
1
<img src="https://pp.userapi.com/c633930/v633930906/27f1f/KtWte3Vcn-0.jpg?ava=1">

JavaScript
1
2
document.querySelector('img').addEventListener('click',() =>
    document.querySelector('body').style.backgroundImage = 'url(https://pp.userapi.com/c633930/v633930906/27f1f/KtWte3Vcn-0.jpg?ava=1)' );

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html, body{
    margin: 0px 0px 0px 0px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px 0px;
}
 
img{
    margin: 100px 0px 0px 200px;
    transition: .5s;
}
 
img:hover {
    transform: scale(2);
}

Спасибо за верное замечание Qwerty_Wasd

@Рикардо Милосс · 02.02.2019, 03:06 **[ТС]**

Почему-то у меня картинка не становиться фоном, их становиться много, и не работает увеличение при наведении курсора(((

@Mr_Sergo · 02.02.2019, 03:45

Сообщение от Рикардо Милосс

не работает увеличение при наведении курсора

Вот так -> https://codepen.io/Mr_Sergo/pen/MLmera работает?

HTML5
1
<img src="https://pp.userapi.com/c633930/v633930906/27f1f/KtWte3Vcn-0.jpg?ava=1">

JavaScript
1
2
3
document.querySelector('img').addEventListener('click',function(){
    document.querySelector('body').style.backgroundImage = 'url(https://pp.userapi.com/c633930/v633930906/27f1f/KtWte3Vcn-0.jpg?ava=1)';
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html, body{
    margin: 0px 0px 0px 0px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px 0px;
}
 
img{
    margin: 100px 0px 0px 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
img:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

@Рикардо Милосс · 06.02.2019, 06:45 **[ТС]**

Всё работало идеально, это я из-за своей невнимательности допустил ошибку в подключении css.))

@Mr_Sergo · 06.02.2019, 07:29

Сообщение от Рикардо Милосс

из-за своей невнимательности

Со всеми бывает

Рад что разобрались

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@Рикардо Милосс 0 / 0 / 0 Регистрация: 29.01.2019 Сообщений: 6

	Как сделать картинку фоном 29.01.2019, 09:28. Показов 2505. Ответов 5 Метки нет (Все метки) Как сделать так что бы при наведении курсора мыши на картинку она увеличивалась в размерах, а при клике по ней, она стала фоном??? 0

@Рикардо Милосс 0 / 0 / 0 Регистрация: 29.01.2019 Сообщений: 6
	02.02.2019, 03:06 [ТС]
	Почему-то у меня картинка не становиться фоном, их становиться много, и не работает увеличение при наведении курсора((( 0

@Рикардо Милосс 0 / 0 / 0 Регистрация: 29.01.2019 Сообщений: 6
	06.02.2019, 06:45 [ТС]
	Всё работало идеально, это я из-за своей невнимательности допустил ошибку в подключении css.)) 0

Как сделать картинку фоном

Решение