Фон на сайте обрезается

Question

Я создаю веб-страницу.

У меня была картинка в качестве фона, пока на большом экране я не понял, что она не растягивается, как предполагалось. Изображение было в основном градиентом цветов, но я решил, что мог бы сделать это с помощью встроенной функции градиента css: s.

Дело в том, что фон обрезается. Внизу у меня есть col-sm-12.text-center, и он ниже этого, который он отключает. Внизу у меня есть нижний колонтитул, поэтому между концом col-sm-12 и нижним колонтитулом есть пробел.

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

Я искал, но не нашел ответа на эту проблему.

Я подозреваю, что проблема с col-sm-12 может быть проблемой, но у вас, ребята, есть какой-то другой вопрос к этой проблеме?

Answer 1

для наращивания изображения на заднем плане используйте размер: обложка;

.my_bg_img { 
    background-image: url('./your_image.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    height: 100%; 
    widht: auto; 
} 

это подходит контейнер ... если контейнер слишком мал удалить Col-см-12 или изменить соответствующий контейнер (например: корпус для образца)

Answer 2

Я не имею ничего в моем Html. В моем CSS

body{ 
    font-family: "Source Sans Pro Light", sans-serif; 
    background: linear-gradient(to bottom left, black, white); 
    background-size: cover; 
    margin-bottom:10px; 
    background-repeat: no-repeat; 
    height: 100%; 
    width: auto;