Для настройки разрешения фоновых картинок для разных экранов без использования медиа-запросов или элемента picture можно воспользоваться атрибутом style и свойством background-size.
1) В HTML файле создайте элемент, для которого нужно настроить фоновое изображение:
```html
<div id="myElement"></div>
```
2) В CSS файле задайте стили для этого элемента, включая фоновое изображение:
```css
#myElement {
width: 100%;
height: 100%;
background-image: url('image.jpg');
background-size: cover;
}
```
3) Чтобы определить разные изображения для разных разрешений экрана, вы можете использовать атрибут style в HTML-файле и задать соответствующие значения в CSS:
```html
<div id="myElement" style="background-image: url('small_image.jpg');"></div>
```
```css
@media (min-width: 768px) {
#myElement {
background-image: url('medium_image.jpg');
}
}
@media (min-width: 1200px) {
#myElement {
background-image: url('large_image.jpg');
}
}
```
Таким образом, для экранов шириной менее 768 пикселей будет использоваться small_image.jpg, для экранов шириной от 768 до 1199 пикселей - medium_image.jpg, и для экранов шириной 1200 пикселей и более - large_image.jpg.
Если изображение будет заменяться через CMS, вы можете использовать разные HTML-файлы для каждого разрешения и подключить нужные изображения через атрибут style:
```html
<div id="myElement" style="background-image: url('image_small.jpg');"></div>
```
```html
<div id="myElement" style="background-image: url('image_medium.jpg');"></div>
```
```html
<div id="myElement" style="background-image: url('image_large.jpg');"></div>
```
Каждый HTML-файл будет загружаться в зависимости от разрешения экрана, и соответствующее изображение будет подключаться как фоновое для элемента.