Как добавить фоновое изображение в тему Tumblr

Оглавление:

Как добавить фоновое изображение в тему Tumblr
Как добавить фоновое изображение в тему Tumblr

Видео: Как добавить фоновое изображение в тему Tumblr

Видео: Как добавить фоновое изображение в тему Tumblr
Видео: Outlook 2013 полезные советы 2024, Апрель
Anonim

Из этой статьи вы узнаете, как использовать фотографию в качестве фона в Tumblr. Фоновые изображения некоторых тем Tumblr нельзя изменить, будь то загрузка или редактирование HTML.

Шаги

Метод 1 из 2: использование настраиваемой темы

Поместите фоновое изображение в свою тему Tumblr Шаг 1
Поместите фоновое изображение в свою тему Tumblr Шаг 1

Шаг 1. Перейдите на сайт Tumblr

Он находится по адресу https://www.tumblr.com/. Если вы вошли в систему в своем браузере, вы перейдете на главную страницу Tumblr.

Если вы не вошли в Tumblr, введите свой адрес электронной почты и пароль, затем нажмите Войти.

Поместите фоновое изображение в свою тему Tumblr Шаг 2
Поместите фоновое изображение в свою тему Tumblr Шаг 2

Шаг 2. Щелкните значок своего профиля

Это значок в виде человека в правом верхнем углу страницы.

Поместите фоновое изображение в свою тему Tumblr Шаг 3
Поместите фоновое изображение в свою тему Tumblr Шаг 3

Шаг 3. Щелкните имя блога, который хотите отредактировать

Вы найдете его под заголовком «TUMBLRS» примерно на полпути вниз в раскрывающемся меню профиля.

Поместите фоновое изображение в свою тему Tumblr Шаг 4
Поместите фоновое изображение в свою тему Tumblr Шаг 4

Шаг 4. Щелкните Изменить внешний вид

Эта опция находится в правом верхнем углу страницы, чуть ниже Черновики а также Сообщения разделы.

Поместите фоновое изображение в свою тему Tumblr Шаг 5
Поместите фоновое изображение в свою тему Tumblr Шаг 5

Шаг 5. Щелкните Редактировать тему

Это справа от заголовка «Тема веб-сайта» под изображением вашего профиля.

Поместите фоновое изображение в свою тему Tumblr Шаг 6
Поместите фоновое изображение в свою тему Tumblr Шаг 6

Шаг 6. Найдите значок камеры или карандаша рядом с полем «Фон»

Эта опция находится под заголовком «ТЕМАТИЧЕСКИЕ ВАРИАНТЫ». Если вы видите значок камеры или карандаша справа от Фон, вы можете загрузить собственное изображение.

  • В некоторых темах Tumblr есть варианты Фон (например., Выберите фон) здесь.
  • Если вы не видите этот параметр в параметрах темы вашего блога, перейдите к следующему методу.
  • Некоторые бесплатные темы, которые позволяют загружать собственные фотографии, - это «Ловля слона» и «Papercut». Платные темы включают «Королевы» и «Безмятежность».
Поместите фоновое изображение в свою тему Tumblr Шаг 7
Поместите фоновое изображение в свою тему Tumblr Шаг 7

Шаг 7. Щелкните значок камеры

Откроется окно, в котором вы сможете выбрать фотографию на своем компьютере.

Для некоторых тем вы вместо этого щелкните значок карандаша

Поместите фоновое изображение в свою тему Tumblr Шаг 8
Поместите фоновое изображение в свою тему Tumblr Шаг 8

Шаг 8. Выберите фотографию

В зависимости от вашего компьютера и места, в котором открывается это окно, вам может потребоваться перейти в папку «Фотографии» на вашем компьютере.

  • Некоторые темы потребуют от вас первого нажатия Выберите фото.
  • Убедитесь, что фото относительно качественное. В противном случае изображение может выглядеть зернистым или не в фокусе.
Поместите фоновое изображение в свою тему Tumblr Шаг 9
Поместите фоновое изображение в свою тему Tumblr Шаг 9

Шаг 9. Щелкните Открыть

Он находится внизу окна. Ваша фотография будет загружена в Tumblr; ваша тема должна обновиться в течение нескольких секунд после этого, чтобы отобразить новый фон.

Метод 2 из 2: редактирование HTML

Поместите фоновое изображение в свою тему Tumblr Шаг 10
Поместите фоновое изображение в свою тему Tumblr Шаг 10

Шаг 1. Перейдите на сайт Tumblr

Он находится по адресу https://www.tumblr.com/. Если вы вошли в систему в своем браузере, вы перейдете на главную страницу Tumblr.

Если вы не вошли в Tumblr, введите свой адрес электронной почты и пароль, затем нажмите Войти.

Поместите фоновое изображение в свою тему Tumblr Шаг 11
Поместите фоновое изображение в свою тему Tumblr Шаг 11

Шаг 2. Щелкните значок своего профиля

Эта кнопка в виде человека находится в правом верхнем углу страницы.

Поместите фоновое изображение в свою тему Tumblr Шаг 12
Поместите фоновое изображение в свою тему Tumblr Шаг 12

Шаг 3. Щелкните имя блога, который хотите отредактировать

Он будет под заголовком «TUMBLRS», примерно на полпути вниз в раскрывающемся меню профиля.

Поместите фоновое изображение в свою тему Tumblr Шаг 13
Поместите фоновое изображение в свою тему Tumblr Шаг 13

Шаг 4. Щелкните Изменить внешний вид

Эта опция находится в правом верхнем углу страницы, чуть ниже Черновики а также Сообщения разделы.

Поместите фоновое изображение в свою тему Tumblr Шаг 14
Поместите фоновое изображение в свою тему Tumblr Шаг 14

Шаг 5. Щелкните Редактировать тему

Он находится справа от заголовка «Тема веб-сайта» под изображением вашего профиля.

Поместите фоновое изображение в свою тему Tumblr Шаг 15
Поместите фоновое изображение в свою тему Tumblr Шаг 15

Шаг 6. Щелкните Редактировать HTML

Эта ссылка находится под названием вашей темы в верхней части боковой панели «Редактировать темы».

Поместите фоновое изображение в свою тему Tumblr Шаг 16
Поместите фоновое изображение в свою тему Tumblr Шаг 16

Шаг 7. Щелкните значок шестеренки

Он находится в верхнем левом углу панели «Редактировать HTML».

Поместите фоновое изображение в свою тему Tumblr. Шаг 17
Поместите фоновое изображение в свою тему Tumblr. Шаг 17

Шаг 8. Нажмите «Найти и заменить»

Откроется окно, в котором вы сможете найти строку кода, которую нужно отредактировать.

Поместите фоновое изображение в свою тему Tumblr. Шаг 18
Поместите фоновое изображение в свою тему Tumblr. Шаг 18

Шаг 9. Введите body {

Этот тег присутствует во всех темах Tumblr, содержащих настраиваемое фоновое изображение.

Если HTML-код выбранной темы не содержит тега "body {", вы не можете изменить его фоновое изображение

Поместите фоновое изображение в свою тему Tumblr Шаг 19
Поместите фоновое изображение в свою тему Tumblr Шаг 19

Шаг 10. Ищем фон:

ярлык.

Он находится непосредственно под тегом body {"; вы добавите здесь URL своего изображения между ":" и ";" в конце строки.

Поместите фоновое изображение в свою тему Tumblr Шаг 20
Поместите фоновое изображение в свою тему Tumblr Шаг 20

Шаг 11. Замените любой текст между «background:

"и"; "с вашим тегом URL.

Тег URL должен быть записан следующим образом: url ().

На практике вся эта строка будет говорить background: url (www.website.com/image.jpg);. Имейте в виду, что между частью "background:" и частью "url" есть пробел

Поместите фоновое изображение в свою тему Tumblr. Шаг 21
Поместите фоновое изображение в свою тему Tumblr. Шаг 21

Шаг 12. Введите URL-адрес вашего изображения в круглые скобки

Выбранный URL-адрес должен заканчиваться расширением файла изображения, например-j.webp

Открыть изображение в новой вкладке, и скопируйте оттуда URL.

Если вы хотите использовать оригинальную фотографию, вы можете загрузить ее в сервис, например Photobucket или Imgur

Поместите фоновое изображение в свою тему Tumblr. Шаг 22
Поместите фоновое изображение в свою тему Tumblr. Шаг 22

Шаг 13. Щелкните Обновить предварительный просмотр

Это зеленая кнопка в правом верхнем углу боковой панели «Редактировать HTML». Вы должны увидеть выбранное изображение.

Поместите фоновое изображение в свою тему Tumblr. Шаг 23
Поместите фоновое изображение в свою тему Tumblr. Шаг 23

Шаг 14. При необходимости переместите изображение

Если ваше изображение перекошено или резко обрывается, введите следующие три строки кода под тегом «background»:

  • background-attachment: исправлено; - Это сохранит ваше изображение в одном месте.
  • фон-повтор: без повторения; - Вы также можете изменить режим без повтора на повторение, если хотите, чтобы изображение повторялось, когда пользователи прокручивают страницу вниз.
  • background-position: center; - Вы также можете использовать вправо или влево вместо центра.
  • Вы также можете добавить строку с надписью background-size: cover, чтобы ваше изображение заполняло весь фон.
Поместите фоновое изображение в свою тему Tumblr. Шаг 24
Поместите фоновое изображение в свою тему Tumblr. Шаг 24

Шаг 15. Щелкните Сохранить

Это синяя кнопка слева от Предварительный просмотр обновления в верхней части боковой панели «Изменить HTML».

Поместите фоновое изображение в свою тему Tumblr Шаг 25
Поместите фоновое изображение в свою тему Tumblr Шаг 25

Шаг 16. Щелкните ←

Он находится в верхнем левом углу страницы.

Поместите фоновое изображение в свою тему Tumblr Шаг 26
Поместите фоновое изображение в свою тему Tumblr Шаг 26

Шаг 17. Щелкните Выход

Вы увидите эту опцию в верхнем левом углу боковой панели «Редактировать тему». Теперь ваша тема Tumblr имеет фоновое изображение.

Рекомендуемые: