Снимка - фон на сайт с CSS

fix3d трудност:

видян: 25478

Част 1. Избиране и подготвяне на изображението.

Изберете широко изображение.
Изображението, което ще ви свърши работа е по 1500пиксела широко, толкова е защото и при най-големите резолюции трябва да се вижда фона, а не да се види края на картинката.

Централната точка е ключа към добрия резултат.
Ясна централна точка показва от къде започва страницата и кара хората да се чувстват спокойни и ориентирани. Гледайте за картинки с много свободно пространство и малко детайли. Избягвайте претрупаните и богати на елементи картинки или картинки чиято 'фокусна' точка не е в средата. Все пак фона не е основната част на страницата и е по-скоро детайл отколкото нещо основно.
Отворете картинката си във Фотошоп. Отидете на Images > Image Size и променете (ако има нужда) DPI на 72. Преди да натиснете OK проверете че отметката "Resample Image" не е активирана. Не би трябвало да видите разлика в изображението.

След това трябва да прелеете изображението в долната му страна към един цвят. За да направите това приближете на 100% и с пипетката (Eydropper tool (I)) изберете цвят от най-долната страна на картинката. Аз използвам #40413c. Запомнете този цвят, ще ви потрябва след малко. Вземете инструмента за преливки (Gradient Tool) направете преливка от цвета #40413c към същия, но с Alpha 0%, тоест прозрачно. Направете нов слой и оцветете с преливката, така че цвета да е в долната страна и на горе да се прелива в/у картинката. Като сте готови и ви харесва как изглежда слейте слоевете. (изберете горния и натиснете Ctrl+E).

free tutorials - uroci.com

След това може да се наложи да почистите малко изображението си или да го изрежете малко. В случая аз съм избрал картинка с прекалено много небе, затова ще намалим височината като изрежем част от небето. Това става най-лесно с Crop Tool, просто избирате кое да остане и натискате ентер, или отметката за ОК в горния десен ъгъл.

free tutorials - uroci.com

Ако искате може да направите някой допълнителни корекции по изображението, например контраст, светлина, наситеност на цвета... Като сте готови запишете картинката като JPG (ако е снимка както в нашия случай) или GIF, ако е изображение с по-малко цветове. Вижте в кой от 2та формата, гледа се качество и малки размери. Нека запишем нашата снимка като ‘background.jpg’ на desctop-a.

Част 2: Използване на CSS за да се постави фона на страницата

Направете нова папка на Desktop-а си с име ‘images’. Преместете снимката, която записахме преди малко вътре в тази папка. Направете още една папка с име ‘Photo Background’ и преместете папката ‘images’ в нея.

Отворете Notepad (или любимият си текстов редактор, аз ползвам EditPlus). Запишете 2 файла - index.htm и style.css - в папката ‘Photo Background’ която направихте преди малко на Desktop-а си.

Съдържание на style.css:

body {
background: #40413c url(images/background.jpg);
background-position: top center;
background-repeat: no-repeat;
margin-top: 350px;
}

Може да замените цвета посочен във втория ред (...ound: #40413c url...) с цвета, който избрахте по-рано, когато правихте преливката.

Съдържание на index.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
съдържание на страницата ви
</body>
</html>

Като сте готови заредете файла index.htm в браузъра, който използвате. Това е всичко.

Ако имате въпроси, предложения или проблеми добавете коментар след урока.

Сподели урока:

Коментари (6)

Emilcho на 30.11 2006 в 22:42ч.

Аз съм ЗА дългите обяснения. Незнам какво толкова лошо намирате в тях. На някой хора пък може да им е интерено да четат повече. В този урок всичко е обяснено подробно. На мен лично урока ми хареса.
А относно
body {
background: #40413c url(images/background.jpg);
background-position: top center;
background-repeat: no-repeat;
margin-top: 350px;
}
съм против.
Знам, че никой не ме пита но пък не се сдържам.
тоя скрипт нали народа трябва да го разбере.

CrazyDidro на 10.01 2007 в 19:47ч.

Сега не ми прави много голямо впечатление колко е труден урока, защото започнах малко по малко да ги схващам.Но когато започнах да се занимавам с CSS и Dreamweaver си мечтаех за нещо написано разбираемо!!! Евала на хората, които си губят времето за да споделят знанията си с другите!!! КОлкото до изказването на ferdika - по-добре следващият път да брои до 10 преди да каже или напише нещо.Може пък тогава да се замисли какво говори!!!

napstr на 13.04 2007 в 17:39ч.

Гледайте сега, след като човека е седнал и ви е обяснил нещата разбираемо, защо трябва непременно да му търсим кусури. Не всички са родени с наръчник по CSS в ръка и за тях подобни уроци са безкрайно полезни! И моля ви спестете си излишните (и глупави) коментари. Урока си е обяснен повече от ясно, а ferdika да вземе един буквар, и така А, Б...

Hacko на 27.09 2007 в 22:14ч.

Винаги ще се намери някой който на хубавото ще каже лошо ,въпреки че му харесва.Всяко стадо има черна овца.не му обръщайте внимание

valpin на 16.03 2008 в 04:10ч.

не съм съвсем съгласен с широчината на
картинката, "1500 пиксела"
понеже резолюцията на лаптопа ми е
1680х1050(при по малки екрана се
размазва),а това дори не е максимум,
както е извесно .иначе урока е много
добре обяснен.

pafel4y на 20.09 2008 в 12:49ч.

Урокът е перфектно обяснен! :)) Дори и за мързеливите може само да копирате първия код и да го сложите в файл с име style.css а после другия код в файл с име index.html и пак се получава... :)

Снимка - фон на сайт с CSS

Коментари (6)

Регистрирайте се, за да добавите коментар