У меня есть макет HTML, который включает в себя контейнер шаблонов Jinja. Я нашел статью Medium, в которой вы можете создать динамический c цвет фона. Проблема появляется, когда все содержимое HTML начинает отображаться после тега, который сгенерировал фон, а НЕ на нем.
Может кто-нибудь помочь с идеей?
<!DOCTYPE html>
<html>
<body>
<script>
//Create div element
var div = document.createElement('div');
//Give a height to div
div.style.height = '100vh';
//Append div to document
document.body.appendChild(div);
//Add event listener so document can listen to mouse movements
div.addEventListener('mousemove', function(event) {
var x = event.clientX,
y = event.clientY;
div.style.backgroundColor = 'rgb('+ x +', '+y+', +100)'
})
</script>
<header class="header">
<div class="container">
<h1 class="logo">Calculator App</h1>
<strong><nav>
<ul class="menu">
<li><a href="{{ url_for('home') }}">Home</a></li>
<li><a href="{{ url_for('ingredients') }}">Size Calculator</a></li>
</ul>
</nav></strong>
</div>
</header>
<div class="container">
{% block body %}
{% endblock %}
</div>
<img src="/static/images/example.jpg" alt="Nick" style="width:500px"/>
</body>
</html>