Задать вопрос
@Less1337
html

Почему не применяются стили для body в css?

Доброго времени суток. Возникла некая проблема с оформлением стилей, а именного с body. Сразу прошу не судить строго, я очень начинающий в этой теме. Оформление не работает именно с тегом body, для примера редактировал .container-fluid - все работает, статику настроил правильно. На днях все было прекрасно и изображение подгружалось, но потом возникла какая-то ошибка, хотя я с css не работал, возможно намудрил что-то с бутсрапом, когда добавлял новые функции. Прилагаю код.
СSS
.container-fluid{
    margin: 0 0 100px 0;
    background-color: #b55050;
{

body{
    background-color: #b55050;
    background-image: url('../images/background.jpg');
}


base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'todoapp/css/style.css' %}">
	<link rel="shortcut icon" href="{% static 'todoapp/images/favicon.ico' %}" type="image/x-icon"/>
    <title>{{ title }}</title>
    <nav class="navbar bg-body-tertiary">
      <div class="container-fluid">
        <a href="{% url 'index' %}" class="navbar-brand">
            <img src="{% static 'todoapp/images/logo.png' %}" alt="" width="30" height="24"> ToDoApp by Less
        </a>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Введите запрос" aria-label="Введите запрос" name="search">
          <button class="btn btn-outline-success" type="submit">Найти</button>
        </form>
      </div>
    </nav>
</head>
<body>
    {% block content %}


    {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>


63d92c933d5c9005907299.png

Заранее спасибо.
  • Вопрос задан
  • 230 просмотров
15 комментариев
Подписаться 1 Простой 15 комментариев
Решения вопроса 1
golubevstudio
@golubevstudio
Digital master
1.
У тебя конфликт.
Ты сначала указал цвет боди, а потом сказал залить картинкой. Ты просто не видишь цвета.

2.
Тег body не предназначен для того, чтобы ему прописывались стили. Тем более в bs. Делать то это можно, но не рекомендуется. Для этого придуманы обертки.
А уж если и писать, то в css бутстрапа, а не своем css. СSS бутстрапа имеет приоритет.

О чем тебе написала сама консоль:
А стили на скрине в вопросе, но стиль, который я указал в style.css не принимает мое значение и указывается background-color: var(--bs-body-bg);


Ищи переменную var(--bs-body-bg) в файлах бутстрапа и менять там. Или найди боди > удали оттуда переменную > поставь свой цвет.

У тебя это все в файле _reboot.scss

У тебя же в хроме, когда открываешь код, справа показывается css блока, а еще правее и выше есть линк, что это за файл. Вот туда то и надо прописывать свой цвет.

background-color: #1c87c9; !important // Так тоже можно писать, и если я не ошибаюсь, то бс такое переопределяет
Ответ написан
13 комментариев
13 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Инженер-энергетик
Ростелеком • Великие Луки
от 35 000 ₽
Magento разработчик (Frontend)
ABС-TELECOM LLC
от 1 500 до 2 500 $
Senior JavaScript Developer
Vital Partners LLC
от 350 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка фронденд
24 мар. 2023, в 11:46
20000 руб./за проект
Дизайн приложения сети заправок
24 мар. 2023, в 11:36
30000 руб./за проект
Разработка чат-бота ВК
24 мар. 2023, в 10:50
200000 руб./за проект
Ещё заказы