Растянуть изображение по вертикали, используя JavaScript или Jquery

Question

Эй, я здесь новенький, и я был бы признателен за любую помощь, так как уже несколько недель бьюсь головой о стену.

В настоящее время я работаю над темой Wordpress, расположенной на blog.honora.com. Если вы посмотрите, то увидите, что изображение останавливается, а затем формирует белый фон. Изображение находится по адресу http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg. Это, очевидно, повторяется, но по какой-то причине оно хочет остановиться и не опускаться до нижнего колонтитула. Я перепробовал много вещей в CSS. Если я установил фиксированное изображение, оно повторяется внизу, но оно портится, когда вы уменьшаете размер браузера и перемещаетесь слева направо. Мне нужно что-то, что движется так же, как и нижний колонтитул.

Я определенно скучаю по чему-то очень простому. Я могу предоставить любой код, который вам нужен или если вам нужно. Я бы хотел помочь вам, ребята.

Заранее спасибо, -Т

Answer 1

Как заметил Йода, для этого вам не нужен javascript или jQuery. Все, что вам нужно, это CSS. Убедитесь, что у вас есть блочный элемент (возможно, вы можете использовать элемент body), который включает весь ваш контент, кроме нижнего колонтитула, и примените свойство background к элементу с вашим изображением. Возможно, вам придется изменить свое изображение, так как оно довольно широкое. Чтобы он повторялся до конца страницы, просто добавьте атрибут «repeat-y».

Это может выглядеть так:

body{
    background: url('URL of image') repeat-y;
}

Answer 2

Похоже, вы используете изображение и растягиваете его под свой фон, просто используйте CSS, чтобы установить фоновое изображение ... это должен быть CSS для вашего тега body, а затем удалите изображение.

body {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg) center top}
 font-size: 62.5%; /* Resets 1em to 10px */
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
 color: #333;
 text-align: center;
 margin:0;
 padding:0; 
}

Но с добавлением этого он не совпадает с растянутыми изображениями в нижнем колонтитуле

---

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

• Вам действительно нужно очистить форматирование (я обнаружил много </div> без открытия <div>).
• Удалите теги, которые вы используете для фона и нижнего колонтитула.
• Удалите функцию getH.
• Теперь, чтобы заставить изображение тела работать с вашим нижним колонтитулом, вам нужно использовать символ, который не включает ваш нижний колонтитул ... вот пример:

Хорошо, я не знаю, почему я не могу добавить HTML как код, поэтому вот ссылка

Затем измените ваш CSS так:

#main-content {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg) top center repeat-y;}
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
 font-size: 10px;
 color: #333;
 text-align: center;
 margin:0;
 padding:0; 
}

#footer {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/body_bg_about_4.jpg) bottom center repeat-x;}
 padding:0px;
 margin: 0 auto;    
 clear: both;
}

Answer 3

Вам не нужен JavaScript, чтобы применить фон, просто используйте CSS. Создайте 2 основных элемента: site_content и footer. Скажите site_content «поймать» все, что принадлежит веб-сайту, кроме нижнего колонтитула, и установите нужный нижний колонтитул.

Также, в site_content, используйте это: http://www.webtoolkit.info/css-clearfix.html Это позволит вам иметь div, который автоматически расширяется по вертикали. Примените свой фон, чтобы повторить этот div, и он должен работать как шарм :)