Как заменить фоновое изображение с одного на другое в css javascript?

Question

Егор @ItzIsonn

Type something...

Как заменить фоновое изображение с одного на другое в css javascript?

Мне надо, чтобы одна картинка в background-image заменилась другой. Но когда я пытаюсь через

preview.style.backgroundImage = "url(icons/Icon.png)"; //preview это там, где меняется изображение

у меня остаётся старая картинка и добавляется вниз новая. Как это сделать?

Вопрос задан более года назад
243 просмотра

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

3 комментария

Егор @ItzIsonn Автор вопроса

Вот мой пример

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="amount400" tabindex="1" onclick="amount = 800; amountchange()">
                    <h3>400</h3>
                </div>
<div class="preview">
                    <h3 id="rublikspreview">Не выбрано</h3>
                </div>
</body>
</html>

.amount400 {
  width: 200px;
  height: 210px;
  margin-top: -210px;
  margin-left: 320px;
  background-image: url("icons/Icon.png");
  background-repeat: no-repeat;
  background-size: 175px 175px;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #696969;
  box-shadow: 5px 5px 10px 2px #222;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.35s;
}

.rubliks400 h3 {
  font-size: 22px;
  font-family: "Arial Black";
  color: #ffbb00;
}

.preview {
  width: 200px;
  height: 210px;
  margin-left: 75px;
  margin-top: 20px;
  background-image: url("icons/NotSelected.png");
  background-repeat: no-repeat;
  background-size: 175px 175px;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #696969;
  border-radius: 10px;
}

.preview h3 {
  font-size: 22px;
  font-family: "Arial Black";
  color: #f14141;
}

let buy_preview = document.querySelector("#rublikspreview");

function amountchange() {
    buy_preview.style.backgroundImage = "url('icons/Icon.png')";
}

Написано более года назад

Noder SS @noder_ss

Егор, А кому вы указываете фон? Тексту? Не могу разобраться в коде.

Написано более года назад
Егор @ItzIsonn Автор вопроса

Да, спасибо, не заметил. Исправил. Теперь всё работает

Написано более года назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 4 часа назад
- 49 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 19 часов назад
- 63 просмотра
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- 23 часа назад
- 72 просмотра
2

ответа
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 458 просмотров
2

ответа
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 81 просмотр
2

ответа
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 30 просмотров
1

ответ
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 94 просмотра
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать дизайн приложений

22 дек. 2024, в 19:03

60000 руб./за проект

Веб-дизайн клининговой компании

22 дек. 2024, в 17:54

10000 руб./за проект

Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры

22 дек. 2024, в 17:45

10000 руб./за проект

style.backgroundImage

Уже давно есть кастомные свойства.
Их и используйте. Очень удобно.

Answer 1 · 2023-03-07 23:00:28

По примеру Илья Корень все работает корректно:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="bg"></div>
</body>
<style>
    .bg{
        background: url("https://centr-plyazhnogo-voleybolu.netlify.app/photo-header.jpg");
width: 300px;
height: 300px;
background-size: cover;
    }
</style>
<script>
    let preview = document.querySelector(".bg")
    preview.onclick = function(){
        preview.style.backgroundImage = "url('https://centr-plyazhnogo-voleybolu.netlify.app/img11.jpg')"
    }
</script>
</html>

Answer 2 · 2023-03-07 22:11:00

Желательно бы код.
Но сходу скажу, что вам в url нужно также строку передавать, т.е.:

preview.style.backgroundImage = "url('icons/Icon.png')";

Думаю проблема в этом и кроется.

Как заменить фоновое изображение с одного на другое в css javascript?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт