CSS - заполнение остальной части веб-страницы черным - PullRequest
Новая
       0

CSS - заполнение остальной части веб-страницы черным

0 голосов
/ 13 ноября 2011

У меня есть веб-страница с фоновым изображением, которая должна быть четкой и сфокусированной.

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

Мне нужен способ заполнить оставшееся пространство (которое будет варьироваться от размера экрана к размеру экрана) черным.

Самый простой способ понять, о чем я говорю, это перейти на веб-страницу: (не подразумевается самореклама) http://hopeish.com

Особенно, если вы используете Chrome и Firefox - так как сафари в порядке, и IE не подвержен такому же воздействию

Есть идеи, как я могу это сделать?

Ответы [ 4 ]

2 голосов
/ 13 ноября 2011 
background: url(image.jpg) #000 no-repeat;
1 голос
/ 13 ноября 2011 
background:#000 url(image.jpg) bottom right no-repeat;

таким образом, ваша картинка будет справа внизу, а остальные будут заполнены черным.

0 голосов
/ 13 ноября 2011

Достижимо с помощью простого CSS. 

body {
    background: url('http://hopeish.com/image.jpg') no-repeat top right black;
}

Вот живой пример

0 голосов
/ 13 ноября 2011

У вас есть: 

body {
  background: url(image.jpg);
  background-repeat: no-repeat;
  /*background-attachment:fixed;*/
}

Добавьте background-color: black;, чтобы получить черный фон. 

body {
  background-color: black;
  background: url(image.jpg);
  background-repeat: no-repeat;
  /*background-attachment:fixed;*/
}

Или используйте сокращенный вариант свойства фона, указанный в других ответах.

http://reference.sitepoint.com/css/background

...