Изменение размера фона для соответствия содержанию?

Question

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

Мой фон состоит из 4 углов, 4 краев и заливки для середины. Можно ли изменить его размер? Пример того, как я хочу его использовать:

Мое фоновое изображение в настоящее время поддерживает около 4 абзацев и я внизу. Что если я хочу 7-8 абзацев? Придется ли мне вручную переделывать изображение, чтобы оно было длиннее, или я могу сделать так, чтобы оно делало снимки с левого края, правого края, нижних углов и нижних краев и затем его? Я действительно надеюсь, что это имело смысл, ха-ха.

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

Спасибо за ваше время.

Answer 1

номер

Сделайте углы и края отдельными изображениями. Верхние / нижние края должны быть мозаичными по горизонтали; левый / правый край по вертикали.

Затем в качестве фона создайте "среднее" изображение, которое либо мозаично, либо масштабируется другим способом. Этот ответ может вам помочь.

Answer 2

Вы можете сделать это, используя свойства css3.Пока не все браузеры поддерживают это!

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

https://developer.mozilla.org/en/CSS/-moz-background-size