Хочу наложить боковое правое меню +лого которое в html на фон css
но не получается, пробовал background-repeat: no-repeat для текста и бокового меню, так же пробовал position: relative на правом меню, но в итоге получается что блок который должен быть справа смещаеться в низ, вместе с кнопками и текстом, мне нужно что бы первая картинка(картинка фона) была на месте и не мешала тексту,боковому меню и кнопкам,
вот код layout и Css, я только учусь, поэтому без хейта плиз) вот как вышло
Layout
spoiler{% load static %}
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src=""></script>
</head>
<body>
<div class="box">
<img src="img/bodu.jpg">
</div>
<aside>
<img src="{% static 'main/img/logo.png' %}" alt="logo" position: absolute;>
<span class="logo"></span>
<h3>Навигация</h3>
<ul>
<a href="{% url 'home' %}"><li><i class="fa-solid fa-house"></i> Главная</li></a>
<a href=""><li><i class="fa-sharp fa-solid fa-address-book"></i> Контакты</li></a>
<a href="{% url 'about' %}"><li><i class="fa-sharp fa-solid fa-paper-plane"></i> Про нас</li></a>
</ul>
</aside>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
код main.css
spoiler.box{
background: url(../img/bodu.jpg);
height: 100vh;
background-left: 100px;
}
aside {
float: left;
background: #c4b6ed;
width: 18%;
padding: 2.5%;
height: 100vh;
color: #000000;
border-right: 5px solid #09232e;
position: relative
}
aside img {
width: 80%;
float: left;
}
aside .logo {
font-size: 40px;
margin-right: 40px;
font-weight: bold;
position: relative;
top: px;
}
aside h3 {
margin-top: 60px;
font-size: 30px;
}
aside ul {list-style: none;}
aside ul li {
color: #000000;
display: block;
margin-top: 10px;
transition: transform .6s ease;
}
aside ul li:hover, aside ul a:hover {
color: #d774d6;
text-decoration: none;
transform: scale(1.08);
}
main .features {
float: left;
color: #fff;
margin-top: 100px;
text-align: center;
width: 75%
}
main .features h1 {font-size: 50px;}
main .features p {max-width: 400px; margin: 20px auto}
