Без полосы прокрутки и коробки

Question

1. Как изображение может быть статичным без полосы прокрутки?
2. И как мне получить коробку в середине изображения? Потому что я должен написать, что домашняя страница находится в разработке.

Это страница: http://odsgaardklausen.dk/DBS/DBS.php

Надеется, что кто-то может помочь мне: D

От Kamilla: D

Answer 1

Добавить изображение в качестве фона на body

для пример:

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Хорошая статья может быть найдена на css tricks

Answer 2

Вместо того, чтобы использовать img тега, установить изображение на окружающую div в качестве фонового изображения и назначить background-size: cover; и height: 100vh; (плюс еще несколько стилей для вертикального центрирования, см скрипки в конец этого ответа).

Для окна сообщений в середине, поставить еще один div внутри вашего div, которая имеет фоновое изображение, и дать ему следующие стили:

display: table-cell; 
vertical-align: middle; 
color: white; 
text-align: center; 

https://jsfiddle.net/eydLkepa/1/

Если вы хотите полное решение (и только начинают адаптировать стили): https://jsfiddle.net/eydLkepa/3/

Answer 3

(Selector (Div or else)) { 
 
    background: url(image path) no-repeat center center fixed; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
}

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

(Selector for text div){ 
 
    z-index:''; 
 
    color:''; 
 
    font-size:''; 
 
    top : 50%; 
 
    left:50%; 
 
    etc.. etc... 
 
}