Как да центрирате фонова снимка в Tumblr

Въведение

Центрирането на фонова снимка в темата на вашия Tumblr блог е изключително просто – достатъчно е да промените една линия CSS код в HTML редактора на темата. Препоръчва се да използвате изображение, което запълва цялото пространство без да се повтаря (тил). По подразбиране темата Tumblr Redux задава повторение, но това може лесно да се изключи и да се центрира изображението както хоризонтално, така и вертикално.

Стъпка 1 – Достъп до настройките на блога

Отворете Tumblr и кликнете върху стрелката до името на вашия блог, за да видите списъка с всички ваши блогове. Изберете желания блог, след което кликнете върху Customize (Персонализиране), за да отворите темата в режим на редактиране.

Стъпка 2 – Качете фонова снимка

В панела Background Image (Фонова снимка) натиснете иконата Upload (Качване), изберете изображението от вашия компютър и кликнете Open. Снимката ще се появи в полето за фон.

Стъпка 3 – Отворете HTML редактора

Кликнете върху линка Edit HTML (Редактиране на HTML), за да отворите кода на темата.

Стъпка 4 – Намерете CSS правилото за фон

Натиснете Ctrl+F (или Cmd+F на Mac) и въведете думата background. Търсенето ще ви отведе до реда, подобен на следния:

body { background: {color:Background} url('{image:Background}') top left fixed repeat; }

Стъпка 5 – Променете стойностите

Заменете частта top left fixed repeat с no-repeat center center. Първият center центрира вертикално, а вторият – хоризонтално. Не забравяйте точката и запетаята (;) в края на израза:

body { background: {color:Background} url('{image:Background}') no-repeat center center; }

Стъпка 6 – Преглед и запазване

Натиснете Update Preview (Обнови предварителен преглед), за да видите как изглежда новият фон. Ако всичко е наред, кликнете Save (Запиши) и затворете редактора, като натиснете иконата Exit (Изход).

Съвети

• Ако искате съкратен вариант, можете да използвате само no-repeat center. Когато пропуснете едно от стойностите center, браузърът автоматично приема центриране и по двете оси.
• За подравняване в горната част на страницата, използвайте no-repeat top center – това ще центрира хоризонтално, но ще позиционира изображението в горната част.

След като приложите тези промени, вашият Tumblr блог ще има елегантно центриран фон, без нежелано повторение.