Как background-image сделать ссылкой ? - HTML и CSS

Asmud · 06.11.2015, 10:11

Добрый день!

Занимаюсь редактированием сайта и пытаюсь понять что такое CSS :о) с HTML немножко знаком, а с этим зверем никак не могу разобраться :о(

Вот тут такое дело ... в шапке сайта есть 2 фотографии, они статичные и как я нашёл в коде являются background-image, хотел сделать чтобы там была последняя фотография из новостей и когда на неё кликаеш открывается новость относящаяся этой фотографии... но только нечего не получилось ...

в поиске нашел вот эту тему:
http://www.programmersforum.ru/showthread.php?p=553791
но не получилось сделать background-image ссылкой получается только текст :о(

Подскажите пожайлуста с какой стороны подходить к решению этой задачи ?

Для начала хоть бы разобраться как background-image ссылкой делать :о(

maksim_serg · 06.11.2015, 11:30

если я правильно понял:

Код:

<a href="#">
<div style="width:100px;height:100px;background-image: url(...)"></div>
</a>

SQLPowerUser · 06.11.2015, 11:52

Посмотрите ещё в сторону спрайтов http://habrahabr.ru/post/159027/
А для данного случая вполне подойдет такой код

Код HTML:

<!DOCTYPE html>
<html>
<head>
<title>tmp</title>
<meta charset="utf-8">
<style>
a {
  font:16px Verdana,Arial,Tahoma,'sans-serif';
  display:inline-block;
  height:120px; width:200px;
	border:1px solid #0067A1;
}
.s1 {
  background:#0067A1;
  margin-left:138px;
  background-image:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQjffsjq5l8fRyVuIFe4RWOF3x9pl8dBZL0Gi4djXoIV8lLzoo");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.s2 {
  background:#229FBF;
  background-image:url("http://img1.liveinternet.ru/images/attach/c/1//48/902/48902126_mashina.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
</style>
</head>
<body>
<a class="s1" href="http://newsfun.ru/article/v-ukraine-v-g-odessa-politsiya-zaderzhala-chubakku-foto" target="_blank"></a>
<a class="s2" href="http://www.glunews.ru/news/Society/v_italyanskoj_shkole_zapretili_kabluki_iz-za_ugrozy_zemletryaseniya.html" target="_blank"></a>
</body>
</html>

Asmud · 07.11.2015, 00:04

Спасибо что откликнулись :о)

Получилось что то интересное но сайту стало плохо :о)

Жутко извиняюсь первый пост делал в попыхах, нужно было срочно уходить, поэтому забыл сказать что сайт сделан на "движке" WordPress и тут главная страница как то хитро порезана на кучу файлов, щас вот только начал разбираться как они взаимосвязаны :о(

для стилей отдельный файл для сборки странички другой :о( для моего линейного hml-понимания както жестоко.

для понимания вот главная страничка :о) http://umka.edu.ru/

Asmud · 07.11.2015, 00:42

Ну вроде начинает что то получатся :о)

Код:

из файла
/public_html/wp-content/themes/twentyfourteen/style.css
удалил
========== ========== ========== ========== ========== 

/*старая плевая картинка на макете*/
#header-left {
	background:url(img/header_left.jpg) no-repeat;
	width:291px;
	float:left;
	height:181px;
}

/*старая правая картинка на макете*/
#header-right {
	background:url(img/header_right.jpg) no-repeat;
	width:291px;
	float:left;
	height:181px;
}
========== ========== ========== ========== ========== 

в файле
/public_html/wp-content/themes/twentyfourteen/header.php
Заменил
========== ========== ========== ========== ==========
<div id="header-left"></div>	

<div id="tel">
	<div>
		<i>[812]</i>
		<span>437-46-27</span>
		<span>437-75-47</span>
	</div>
</div>

<div id="tel-slab">
	<span>(812) 437-46-27</span>
	<span>(812) 437-75-47</span>
</div>

<div id="header-right"></div>
========== ========== ========== ========== ==========
на
========== ========== ========== ========== ==========
<a href="http://umka.edu.ru/%D0%B1%D0%B5%D0%B7-%D1%80%D1%83%D0%B1%D1%80%D0%B8%D0%BA%D0%B8/%D0%B2%D1%8B%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0-%D0%BE%D1%81%D0%B5%D0%BD%D0%BD%D0%B8%D1%85-%D0%BF%D0%BE%D0%B4%D0%B5%D0%BB%D0%BE%D0%BA/">
	<div  id="header-left" style="width:291px;height:181px;float:left;background-image: url(http://umka.edu.ru/!umka!/news/2015/1026/0001-m.jpg)"></div>
</a>	
<div id="tel">
	<div>
		<i>[812]</i>
		<span>437-46-27</span>
		<span>437-75-47</span>
	</div>
</div>

<div id="tel-slab">
	<span>(812) 437-46-27</span>
	<span>(812) 437-75-47</span>
</div>

<a href="http://umka.edu.ru/%D0%B1%D0%B5%D0%B7-%D1%80%D1%83%D0%B1%D1%80%D0%B8%D0%BA%D0%B8/%D0%BE%D1%81%D0%B5%D0%BD%D0%BD%D0%B8%D0%B9-%D0%BF%D1%80%D0%B0%D0%B7%D0%B4%D0%BD%D0%B8%D0%BA/">
	<div  id="header-right" style="width:291px;height:181px;float:left;background-image: url(http://umka.edu.ru/!umka!/news/2015/1030/0001-m.jpg)"></div>
</a>
========== ========== ========== ========== ==========

Осталось подогнать чтобы фото в процентах ужимал и программа минимум выполнена :о)

06.11.2015, 10:11	#1
Asmud Регистрация: 06.11.2015 Сообщений: 3	Как background-image сделать ссылкой ? Добрый день! Занимаюсь редактированием сайта и пытаюсь понять что такое CSS :о) с HTML немножко знаком, а с этим зверем никак не могу разобраться :о( Вот тут такое дело ... в шапке сайта есть 2 фотографии, они статичные и как я нашёл в коде являются background-image, хотел сделать чтобы там была последняя фотография из новостей и когда на неё кликаеш открывается новость относящаяся этой фотографии... но только нечего не получилось ... в поиске нашел вот эту тему: http://www.programmersforum.ru/showthread.php?p=553791 но не получилось сделать background-image ссылкой получается только текст :о( Подскажите пожайлуста с какой стороны подходить к решению этой задачи ? Для начала хоть бы разобраться как background-image ссылкой делать :о(

07.11.2015, 00:04	#4
Asmud Регистрация: 06.11.2015 Сообщений: 3	Спасибо что откликнулись :о) Получилось что то интересное но сайту стало плохо :о) Жутко извиняюсь первый пост делал в попыхах, нужно было срочно уходить, поэтому забыл сказать что сайт сделан на "движке" WordPress и тут главная страница как то хитро порезана на кучу файлов, щас вот только начал разбираться как они взаимосвязаны :о( для стилей отдельный файл для сборки странички другой :о( для моего линейного hml-понимания както жестоко. для понимания вот главная страничка :о) http://umka.edu.ru/ Последний раз редактировалось Asmud; 07.11.2015 в 00:06.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сделать картинку ссылкой?	nazar-com	HTML и CSS	4	06.12.2013 12:18
Как поставить background-image в fxml?	pavelslap	Общие вопросы по Java, Java SE, Kotlin	0	22.08.2013 12:57
background-image является ссылкой, как это?	k0nami	HTML и CSS	6	14.06.2010 14:32
Как сделать слой ссылкой?	vlad2423	HTML и CSS	2	31.03.2009 11:05
Как сделать какртинку ссылкой?	vlad2423	HTML и CSS	1	13.03.2009 15:02

06.11.2015, 11:30	#2
maksim_serg Форумчанин Регистрация: 25.03.2010 Сообщений: 417	если я правильно понял: Код: `<a href="#"> <div style="width:100px;height:100px;background-image: url(...)"></div> </a>`