Как сделать картинку ссылкой в css

Как картинку сделать ссылкой через файл style.css?

Возникла проблема: не могу картинку сделать ссылкой в шаблоне для wordpress.

Картинка по умолчанию является фоном. Вот строки из style.css:

background: url(images/header.jpg) no-repeat;

Как header.jpg сделать ссылкой?

а в стиль #header добавить еще width

Agel Nash:

а в стиль #header добавить еще width

Это семантически неверно. Предпочтительный вариант

Да ну вас нафик, чё тегами швыряетесь

dma84:
Да ну вас нафик, чё тегами швыряетесь

проверили бы сначала свой код на работоспособность, а потом постили

Ну и в чём проблема, отпишите где не воркает: браузер(версия), DOCTYPE и т.п.

В вашем примере поверх бекграунда будет текст видно "Logo here". В моем же примере, используеться блок контейнер со свойством text-indent:-9999px; , которое этот самый текст уберает с видимой области блока-ссылки. Таким образом получаеться чистый блок с бекграундом, без видимого анкора. Но анкор присутствует в коде. Плюс в том что при отключении css ссылка будет иметь нормальный читаемый вид.

Как сделать bakground активной ссылкой?

Как сделать так, чтобы при клике на этот фон (картинку) автоматически происходил переход на заданную страницу? Сайт на битриксе.

Понятно, что в css ссылку прописать нельзя. Вопрос, куда тогда код влепить, и какой именно?

Сейчас, в сss прописан такой:

внутри div c этим фоном сделать вашу ссылку <a href="your_link" ></a>

саму ссылку сделать блочной, пропишите стили

учитывайте, чтобы ссылка всегда растягивалась на ширину контента, нужно чтобы у body, html стояло height: 100%.

также желательно указать родителя в стилях для ссылки, где она вложена position: relative;

Как сделать картинку ссылкой в html

Для вывода изображений в html используется тег <img>. Выглядит это таким образом:

Для того чтобы создать ссылку используется тег <a>. Таким вот образом:

Чтобы картинку сделать ссылкой, необходимо всего лишь объединить эти два тега.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *