Finally resolved my CSS sizing issue.

This commit is contained in:
Reto Bollinger 2024-11-18 11:49:16 +01:00
parent 88b0d97b48
commit 524f8f7df2
2 changed files with 11 additions and 34 deletions

View file

@ -66,40 +66,18 @@ div.inner_page {
padding: 0;
}
div.bgimage + div.inner_page {
position: absolute;
box-sizing: border-box;
div.inner_page.bgimage {
background-image: url('/images/bg_image_welcome_1.jpg');
background-size: contain;
background-position: top;
background-repeat: no-repeat;
min-height: 635px;
background-color: rgba(255,255,255,0.6);
background-blend-mode: lighten;
}
.page .bgimage img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
filter: opacity(50%);
}
page .bgimage {
position: absolute;
box-sizing: border-box;
background: #fff;
}
.bgimage {
background: #fff;
}
/*
.inner_page{
position: absolute;
top: 0;
padding: 0px 30px;
box-sizing: border-box;
}
*/
header, footer {
color: #b0b0b0;
}

View file

@ -1,8 +1,7 @@
{% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %}
{% block body %}
<div class="bgimage"><img src="/images/bg_image_welcome_1.jpg"></div>
<div class="inner_page">
<div class="inner_page bgimage">
<h2>{{ this.title }}</h2>
{{ this.body }}
</div>