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

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

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

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

Refguser, этот сайт не для пс

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

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

1	<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

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

&lt;html&gt;  &lt;title&gt;site&lt;/title&gt; &lt;style&gt; .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; }&lt;/style&gt; &lt;body&gt; &lt;div id="bg" class="bg"&gt;&lt;a href="javascript:void(0)" onclick="location.href='https://site.com'"&gt;&lt;img src="snow.gif" alt=""&gt;&lt;/a&gt;&lt;/div&gt; &lt;a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"&gt;&lt;/a&gt; &lt;center&gt;&lt;a href="javascript:void(0)" onclick="location.href='https://site.com'"&gt; &lt;img class="img-responsive" display="block" src="a.png" height="83" width="340"&gt;&lt;/a&gt;&lt;/center&gt;  &lt;/body&gt;  &lt;/html&gt;

<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>

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

У вас 2 кнопки 1.

&lt;center&gt;&lt;a href="javascript:void(0)" onclick="location.href='https://site.com'"&gt; &lt;img class="img-responsive" display="block" src="a.png" height="83" width="340"&gt;&lt;/a&gt;&lt;/center&gt;

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.

&lt;a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"&gt;&lt;/a&gt;

1	<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>

Что вы имели в виду под словом кнопка, 1 или 2? Выберите нужную кнопку а другую удалите. Квадратик вверху это 1. Если 1 не нужен то удалите.

UthvfyV, а там 3 ссылки, этот элемент

PHP

<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>

1

<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>

оказался лишним.
Еще вопрос, как убрать отступ фонового изображения сверху, а кнопку сделать чуть ниже?
давайте я вам сделаю как говрится под ключ. От начала и до конца. Может и весь сайт. Или что у вас? Задание?
UthvfyV, только в рамках этого вопроса, там осталось чуть

&lt;html&gt; &lt;title&gt;site&lt;/title&gt; &lt;style&gt; .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; }&lt;/style&gt; &lt;body&gt; &lt;a class="bg" href="javascript:void(0)" onclick="location.href='https://site.com'"&gt;&lt;/a&gt; &lt;center&gt;&lt;a href="javascript:void(0)" onclick="location.href='https://site.com'"&gt; &lt;img class="img-responsive" display="block" src="a.png" height="83" width="340"&gt;&lt;/a&gt;&lt;/center&gt; &lt;/body&gt; &lt;/html&gt;

<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>

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

&lt;html&gt; &lt;style&gt; 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; }&lt;/style&gt; &lt;body onclick="location.href='https://site.com'"&gt; &lt;img class="img" src=""&gt;  &lt;center class="center"&gt;&lt;a href="javascript:void(0)" onclick="location.href='https://site.com'"&gt; &lt;img src="a.png" height="83" width="340"&gt;&lt;/a&gt;&lt;/center&gt; &lt;/body&gt; &lt;/html&gt;

<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>

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

PHP

a { margin: 20px 0 0; /* двигаем а

1

a { margin: 20px 0 0; /* двигаем а

20px это отступ от верха. Ссылка фона это ссылка body, у body есть ссылка

PHP

<body onclick="location.href='https://site.com', '_blank'">

1

<body onclick="location.href='https://site.com', '_blank'">

onclick это и есть ссылка, т.е. кликаеш по body и благодаря onclick тебя перенаправляет на https://site.com. А чтобы ссылка открыалась в новом окне используй

PHP

<body onclick="window.open('https://site.com', '_blank');return false;">

1

<body onclick="window.open('https://site.com', '_blank');return false;">

Ответы:

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

addEventListener("click", redirectUser);

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

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

PHP

<a href="ссылка.html"> <img src="фоновое_изображение.jpg" alt="фоновое изображение"> </a>

1

<a href="ссылка.html"> <img src="фоновое_изображение.jpg" alt="фоновое изображение"> </a>

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

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для того чтобы сделать фоновое изображение кликабельным, необходимо использовать CSS. Вам нужно добавить следующий код в ваш файл стилей:

body {
  background-image: url('путь_к_изображению.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0); /* прозрачный цвет */
  z-index: 1; /* устанавливаем поверх фонового изображения */
}

.overlay a {
  display: block;
  width: 100%;
  height: 100%;
}

body {

background-image: url('путь_к_изображению.jpg');

background-size: cover;

background-position: center;

position: relative;

}

.overlay {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(0, 0, 0, 0); /* прозрачный цвет */

z-index: 1; /* устанавливаем поверх фонового изображения */

}

.overlay a {

display: block;

width: 100%;

height: 100%;

}

Здесь мы устанавливаем фоновое изображение для body, делаем его размер cover (чтобы оно занимало всю доступную область), центрируем его и устанавливаем позицию relative. Далее мы добавляем дополнительный слой с классом overlay, который будет служить невидимым элементом поверх фонового изображения. Этот слой будет иметь прозрачный цвет и занимать всю доступную область. После этого мы добавляем ссылку внутри этого слоя, которая будет занимать всю доступную область и быть кликабельной.

Теперь, когда пользователь кликнет на фоновое изображение, он будет фактически кликать на эту невидимую ссылку. Вы можете добавить любое действие или переход по ссылке при клике на это изображение.

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

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

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

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

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно