В переполнении стека есть несколько сообщений об использовании SVG для покрытия фона в html-файлах, но, похоже, нет единого мнения о том, как решить эту проблему, и ни одно из решений не помогло мне.
У меня есть файл SVG в той же директории, что и мой index.html, и я ищу лучший способ отобразить SVG в фоновом режиме, чтобы он содержался на устройстве (соответствует отображаемому экрану)
Следующее не работает - единственное, что отображается на экране, - это сам код: «body {background: url ('my_image.svg')}» непосредственно над кнопкой ввода.
Я также пробовал с
body {
background-image: url('my_image.svg');
background-size: 100% auto;
}
, но это также не работает.Также не помогает удаление кавычек.
Вот полный HTML-файл - какой обходной путь для отображения SVG в фоновом режиме содержится в том же каталоге, что и index.html?
Должен ли я использовать фактические параметры SVG в html-файле?
<!DOCTYPE html>
<html lang='en'>
<head>
<title><Test page</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<sytle>
body { background: url('my_image.svg')}
</style>
</head>
<body>
<div class="prose">
<h1>Take a photo! </h1>
<label for="files" class="btn">Select Image</label>
<input id="files" style="visibility:hidden;" type="file" accept="image/*" capture>
</div>
</body>
</html>