Как сделать фоновое изображение кликабельным?

Question

volt111 @volt111

Как сделать фоновое изображение кликабельным?

Что нужно добавить в этот код https://jsfiddle.net/zugdy21k/ чтобы фоновое изображение переходило по той же ссылке что и кнопка, но все остальное осталось без изменений?

Вопрос задан более двух лет назад
276 просмотров

2 комментария

Подписаться 1 Средний 2 комментария

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик + ИИ

9 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 1

12 комментариев

volt111 @volt111 Автор вопроса

Если вставить этот код, фоновое изображение искажается, растягивается, а кнопка становится невидимой. Если задать position: relative, кнопка появляется в самом низу, отдельно от фона.

Написано более двух лет назад

UthvfyV @UthvfyV

<html>

<title>site</title>
<style>
.bg {
width: 100%;
height: 100%;
left: 0;
position: fixed;
display: block;
}
.bg img {
width: auto;
height: 100%;
margin: 0 auto;
display: block;
}
.bg a {
width: 100%;
height: 100%;
display: block;
}
.button {
border: 1px solid #000;
width: 10%;
height: 50px;
}
a, center {
position: relative;
display: block;
}</style>
<body>
<div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div>
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>

</body>

</html>

Написано более двух лет назад

volt111 @volt111 Автор вопроса

UthvfyV, там какой-то квадратик, то ли прямоугольник слева сверху, как его убрать?

Написано более двух лет назад
UthvfyV @UthvfyV
У вас 2 кнопки 1.
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'"> <img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>
и 2.
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
Что вы имели в виду под словом кнопка, 1 или 2? Выберите нужную кнопку а другую удалите. Квадратик вверху это 1. Если 1 не нужен то удалите.
Написано более двух лет назад
volt111 @volt111 Автор вопроса
UthvfyV, а там 3 ссылки, этот элемент
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
оказался лишним.
Еще вопрос, как убрать отступ фонового изображения сверху, а кнопку сделать чуть ниже?
Написано более двух лет назад
UthvfyV @UthvfyV

давайте я вам сделаю как говрится под ключ. От начала и до конца. Может и весь сайт. Или что у вас? Задание?

Написано более двух лет назад
volt111 @volt111 Автор вопроса

UthvfyV, только в рамках этого вопроса, там осталось чуть

Написано более двух лет назад

UthvfyV @UthvfyV

<html>
<title>site</title>
<style>
.bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
}
a, center {
display: block;
}
body {
height: 100%;
background-image: url('snow.gif');
background-repeat: no-repeat;
min-height:100%;
background-position: center center;
background-size: auto 100%;
background-attachment: fixed;
}
center a {
padding: 10em 0 0;
}</style>
<body>
<a class="bg" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>
</body>
</html>

Написано более двух лет назад

volt111 @volt111 Автор вопроса

UthvfyV, появилась полоса прокрутки и кнопка стала слишком низко, как в оригинале высоту можно сделать?

Написано более двух лет назад

UthvfyV @UthvfyV

<html>
<style>
body {
height: 100%;
margin: 0;
background-image: url('snow.gif');
background-repeat: no-repeat;
min-height:100%;
background-position: center center;
background-size: auto 100%;
background-attachment: fixed;
}
a {
margin: 20px 0 0;
/* двигаем а
margin: 20px 0 0 0;
margin внешний отступ от границы
padding: 0px 0 0 0;
padding внутренний отступ от границы 
margin: 20px 0 0 0;
margin: 1 2 3 4;
1 отступ от верха
2 отступ от правой стороны
3 отступ от нижней границы
4 отступ от левой сороны 
т.е. чтоб сделать от верха меньше надо написать
margin: 10px 0 0 0;*/
display: block;
}
.img {
height: 0px;
}</style>
<body onclick="location.href='https://site.com'">
<img class="img" src="">

<center class="center"><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img src="a.png" height="83" width="340"></a></center>
</body>
</html>

Написано более двух лет назад

volt111 @volt111 Автор вопроса

UthvfyV, меняю цифры margin ничего не меняется. С таким параметром "javascript:void(0)" ссылку фона можно сделать? и чтобы ссылки открывались в отдельном окне?

Написано более двух лет назад
UthvfyV @UthvfyV
где ты цифры меняеш? Надо здесь.
a { margin: 20px 0 0; /* двигаем а
20px это отступ от верха. Ссылка фона это ссылка body, у body есть ссылка
<body onclick="location.href='https://site.com', '_blank'">
onclick это и есть ссылка, т.е. кликаеш по body и благодаря onclick тебя перенаправляет на https://site.com. А чтобы ссылка открыалась в новом окне используй
<body onclick="window.open('https://site.com', '_blank');return false;">
Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

volt111 @volt111 Автор вопроса

Нужно чтобы при клике по фоновому изображению открывалась ссылка, куда в какие теги кода ее добавить?

Написано более двух лет назад
Иван @Paveldjdhhd

volt111, ты просишь уже готовое решение? Тогда на другой сайт надо: фриланс. Тут могут помочь с проблемой и тебе помогли, подсказав что делать

Написано более двух лет назад
volt111 @volt111 Автор вопроса

Иван, в том то и дело что ничем не помогли, все что здесь написано абсолютно бесполезно.

Написано более двух лет назад
Иван @Paveldjdhhd

volt111, даешь тегу с фоновым изображением айди, любой. Ищешь по айли и ставишь прослушивание нажатия используя "addEventListener("click", redirectUser);", в "redirectUser" перенаправляешь пользователя на нужную ссылку. Я описал щас все шаги. Осталось только перевести всё это в код. За вас и его написать?

Написано более двух лет назад
volt111 @volt111 Автор вопроса

Иван, совершенно не разбираюсь в этой теме и без понятия куда что вставлять, для того и вопрос, с ссылкой на код, показать кому не сложно.

Написано более двух лет назад
Daishinkan @Daishinkan
volt111,
<a href="ссылка.html"> <img src="фоновое_изображение.jpg" alt="фоновое изображение"> </a>

Вот еще более простая реализация. Здесь преимущественно помогают с кодом, а не пишут его за вас
Написано более двух лет назад
volt111 @volt111 Автор вопроса

Daishinkan, если вставить этот код, фоновое изображение перестает подстраиваться под размер экрана. Нужно чтоб этот параметр "background-size: cover;" оставался без изменений.

Написано более двух лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Веб-разработка

+2 ещё

Средний
Как создавать нормальный B2B SaaS? Есть ли какие то ру курсы/литература? Насколько углубленные знания языка программирования должны быть?
- 1 подписчик
- 16 июл.
- 149 просмотров
6

ответов
Веб-разработка

+4 ещё

Простой
Как хранить публичный медиа-контент сайта?
- 1 подписчик
- 03 июл.
- 268 просмотров
3

ответа
HTML

+2 ещё

Простой
Как запретить формирования ссылок вида /tel:?
- 2 подписчика
- 01 июл.
- 296 просмотров
3

ответа
HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 1 подписчик
- 30 июн.
- 171 просмотр
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 395 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 202 просмотра
1

ответ
Веб-разработка

Простой
В какой программе/сайте можно создать и выгрузить html сайт?
- 3 подписчика
- 21 июн.
- 918 просмотров
3

ответа
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 243 просмотра
3

ответа
Веб-разработка

+2 ещё

Средний
Как избежать вездесущего agentic coding и остаться в IT?
- 8 подписчиков
- 01 июн.
- 3768 просмотров
12

ответов
Веб-разработка

+2 ещё

Средний
Как правильно хранить видео в Django?
- 2 подписчика
- 28 мая
- 473 просмотра
3

ответа
Показать ещё Загружается…

За кликабельный фон ты будешь проклят юзерами и улетишь в бан ПС.

Answer 1 · 2023-12-25 02:23:58

Daishinkan Daishinkan правильно написал, если body задать background то другого метода сделать body ссылкой наверно нет. При помощи js указать body перенаправить по ссылке. А если говорить о html то если хотите сделать background ссылкой, то body для этого мягко скажем не подходит. Можно сразу после <body> написать

<style>
.bg {
width: 100%;
height: 100%;
left: 0;
position: fixed;
display: block;
}
#bg img {
width: 100%;
height: 100%;
display: block;
}</style>
<body>
<div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div>

Некоторое содержимое body при этом может быть невидным. Поэтому там где содержимое невидно задайте ему position: relative

Answer 2 · 2023-12-18 19:54:37

Ставь прослушивание клика на фото и самостоятельно перенаправляй пользователя по нужной ссылке.

addEventListener("click", redirectUser);

Где функцию redirectUser реализуешь сам

Как сделать фоновое изображение кликабельным?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт