Вертикальное фоновое изображение половины страницы (в Squarespace)

Я хочу получить фоновое изображение на половину страницы, которое выглядит так: www.washiarts.com. Я использовал Squarespace для создания сайта, так как я новичок в веб-дизайне... пожалуйста, будьте добры.

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

> body {
   background-image: url("IMAGE URL");
   background-position: 0;
   background-size: 50% 100%;
   background-repeat: no-repeat;
 }

Спасибо за любую помощь.


image css background squarespace
person Nick D    schedule 29.09.2016    source источник
comment
Прочитайте это, это поможет! developer.mozilla.org/en-US/docs/Web/ CSS/   -  person Goombah    schedule 29.09.2016
comment
Спасибо за предложение!   -  person Nick D    schedule 29.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что трудно не сделать это растягиваться. BG-изображение Washiarts.com также немного растянуто. Они используют background-size: cover;

Как насчет того, чтобы создать повторяющийся шаблон и заставить его повторяться вниз?

body {
   background-image: url("http://i285.photobucket.com/albums/ll53/ellee2012/Cute/0-75.png~original");
   background-size: 50%;
   background-repeat: repeat-y;
 }
person Emil    schedule 29.09.2016
comment
Благодарю вас! Это почти идеально — просто немного повторяется внизу. Я надеялся использовать одно большое изображение, а не шаблон (извините, что не указал это). Есть ли способ просто опустить небольшое повторение? - person Nick D; 29.09.2016
comment
Я отредактировал свое исходное изображение, и оно удалило повтор. Я все еще хотел бы знать, как добавить его в контейнер, но у меня есть жизнеспособное решение. Благодарю вас! - person Nick D; 29.09.2016
comment
Если вы не хотите, чтобы это повторялось, просто используйте background-repeat: no-repeat; Но имейте в виду, что изображение будет слишком маленьким для тех, у кого разрешение экрана выше, чем у вас. - person Emil; 30.09.2016
comment
Решением может быть то, что вы отредактируете свое изображение и сделаете его прозрачным на 50%. Затем вы используете background-size: cover; или background-size: 100% 100%;, чтобы заполнить экран. Последнее решение правильно растянет ваше изображение. - person Emil; 30.09.2016