Блог

Главная - Вопросы по программированию - Как установить адаптивное фоновое изображение (автоматическое изменение размера в окне) с помощью css?

Как установить адаптивное фоновое изображение (автоматическое изменение размера в окне) с помощью css?

#css

#css

Вопрос:

Я хочу, чтобы мое фоновое изображение было похоже на обои. Но мне нужна помощь, чтобы сделать это с помощью css. Вот мой css:

 #wallpaper{
position: absolute;
background-size: cover;
background-image: url(C:UsersPedroDesktopASK2DOC landing_pagewallpaper.jpg);
background-repeat: no-repeat;
top: auto;
left: auto;
right: auto;
height: auto;
}

Комментарии:

1. AFAIK, вы не можете сделать это чисто с помощью CSS

2. попробуйте установить значение height 100vh и width значение 100vw в CSS. Кроме того, почему у вас есть значения left И right в CSS? А также @apparatix вы ошибаетесь в этом, вы определенно можете

3. @Markasoftware Вы, вероятно, правы, мои знания CSS довольно скудны 🙂

4. Что вы подразумеваете под «как обои»?

Ответ №1:

Попробуйте следующее :

 #wallpaper {
    background: url(/*image_path*/) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Если это не работает, нажмите здесь.

Комментарии:

1. это работает, но, похоже, OP хочет, чтобы элемент заполнял экран, я бы, вероятно, предпочел установить height and width на 100% or 100vh и 100vw заставить его заполнить осыпь

Ответ №2:

Если вы хотите охватить весь экран, вы можете просто сделать:

 body {
    background-size: cover;
    background-image: url(/wallpaper.jpg);
    background-repeat: no-repeat;
}

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

Метки: