web-touristBackground image – Създаване на линк
Автор: lub4o
В този урок ще направим нашият background, да ни служи като реклама, тоест когато се натисне на него да ни препраща в определена страница.
Ще опитам да го обясня по – просто.
За целта си създаваме нашият HTML Документ:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Background Image Link</title>
</head>
<body>
Text
</body>
</html>Нека създадем нашият CSS и му приложим background image
body
{
margin:0; /*Задаваме margin 0, за да махнем отстъпите извън елемента.*/
background: url('background.jpg') center top; /*Задаваме нашият background, като му слагаме center и top за да го центрираме най - отгоре.*/
}Направих един бърз background, който ще ползваме за урока
Нека отново се върнем към нашият HTML.
Създаваме един празен линк, след тага <body>, който всъщност ще е нашият background link
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Background Image Link</title>
</head>
<body>
<a href="#linkavi" id="backgroundlink"></a><!-- Това ще бъде нашият линк -->
</body>
</html>Нека добавим нашият CSS
#backgroundlink
{
position: absolute; /* Задаваме абсолютно позициониране */
width: 100%; /* Задаваме дължина 100% */
height: 500px; /* Задаваме и една височина. Нея може да си я определите, според това до къде background -а искате да ви е активен, като линк. */
}
НО до момента, ако отворите вашият HTML, целия прозорец ще ви бъде линк, където и да натиснете ще ви препраща в определената от вас страница.За целта, сега ще създадем нашият главен content:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Background Image Link</title>
</head>
<body>
<a href="#" id="backgroundlink"></a>
<div id="content">
Background Image Link
</div>
</body>
</html>И ще довършим нашият CSS
#content{
width:952px; /*Задаваме дължина 952px, тьй като на background изображението белият фон е толкова. */
margin: 0 auto /* Центрираме нашият главен див */
height:1024px; /* Тази височина ще я сложа само за да видите резултата. Ще е добре, след като свършите да я махнете.
/* В момента всичко ще е ок, ще се визуализира нашият див центриран и ще се покаже текста. Но ще забележите, че когато минете с курсора над дива, той ще бъде линк, като останалата част от backgrounda. За целта слагаме position: relative*/
position: relative;
}Може да зададете на дива #backgroundlink -един border: 1px solid red, за да видите, до къде всъщност ще ви се линква изображението.
Завършен HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Background Image Link</title>
</head>
<body>
<a href="#" id="backgroundlink"></a>
<div id="content">
Background Image Link
</div>
</body>
</html>Завършен CSS
body
{
margin:0;
background: url('background.jpg') center top;
}
#backgroundlink
{
position: absolute;
width: 100%;
height: 500px;
}
#content{
width:952px;
margin: 0 auto;
height:1024px;
position: relative;
}Има много други начини за създаване на този ефект. Лично аз успях да го направя по този начин, надявам се да съм ви помогнал.
