Как изменить фон блока и картинку одного элемента при свойстве :focus в css?

Чтобы изменить фон блока и картинку элемента при использовании псевдокласса :focus в CSS, вы можете использовать свойство background и свойство background-image для стилизации фона и картинки соответственно.

Вот пример кода, который показывает, как это сделать:

HTML:

<div class="element">
  <input type="text" id="input" />
  <img src="image.png" alt="Image placeholder" />
</div>

CSS:

.element {
  position: relative;
  width: 300px;
  height: 300px;
}

.element #input:focus {
  background: #ff0000;
}

.element #input:focus + img {
  background-image: url("new_image.png");
}

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

Пропишем стили для блока .element:
- Мы задали ему относительное позиционирование и определили его ширину и высоту.
- Затем мы использовали псевдокласс :focus и селектор #input:focus, чтобы применить стили при фокусе на элемент input.
- Внутри этого селектора мы задали свойство background с красным цветом (#ff0000) для изменения фона блока при фокусе.

Пропишем стили для картинки:
- Мы использовали селектор #input:focus + img, чтобы выбрать следующий элемент после фокусировки на input.
- Внутри этого селектора мы задали свойство background-image и указали путь к новой картинке (new_image.png), которая будет отображаться как фоновая нашей картинке при фокусе.

Обратите внимание, что в данном примере мы использовали селекторы классов и идентификаторов (#), чтобы указать стили для конкретных элементов. Для вашего случая, вы можете изменить селекторы в соответствии с вашей разметкой и требованиями.

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