Hi 46dazzle89
Zitat von
dazzle89
Ich denke das ist mit CSS nur machbar, wenn sich dieser Bereich NICHT innerhalb des roten Containers befindet (vom Markup her). Er müsste rausgenommen werden und es darf sich kein Wrapper herum befinden, der eine feste Breite hat. Du darfst also nicht mit EINEM einzelnen Wrapper arbeiten, der die gesamte Seite zentriert, sondern mit mehreren. Und der Bereich, um den es hier geht, muss sich dazwischen befinden. Ansonsten wüsste ich nicht, wie das responsive klappen sollte.
Da hast du natürlich recht. Ich habe das eigentlich bereits so konzipiert (ich dachte mir auch, dass es sonst sowieso nicht klappen würde). Bei meinem aktuellen Ansatz ist die ganze Seite 100% breit. dann habe ich um mein eigentliches Absatzelement ein Element vom Typ "HTML" gepackt und damit mehrere Div-Wrapper um das Absatzelement gemacht.
HTML-Code:
<div id="main">
<div class="inside">
<div class="mod_article first last block" id="home">
<div class="fullwidthcontainer brown">
<div class="image"></div>
<div class="inside">
<div class="rs-columns ce_rs_columns_start">
<div class="ce_rs_column_start rs-column -large-col-3-1 -large-first -large-first-row -medium-col-3-1 -medium-first -medium-first-row -small-col-1-1 -small-first -small-last -small-first-row">
<div class="ce_text block">
<p>bla bla bla... Content</p>
</div>
</div>
<div class="ce_rs_column_start rs-column -large-col-3-2 -large-last -large-first-row -medium-col-3-2 -medium-last -medium-first-row -small-col-1-1 -small-first -small-last">
</div>
</div>
</div>
</div>
</div>
</div>
HTML-Code:
#main .fullwidthcontainer {
position:relative;
}
#main .fullwidthcontainer > .inside,
#main .fullwidthcontainer > .image{
width:100%;
max-width:1280px;
margin:0 auto;
}
#main .fullwidthcontainer.brown,
#main .fullwidthcontainer .rs-column {
background-color:#d1c0c0;
}
#main .fullwidthcontainer > .image {
width:70%;
margin-left:30%;
background-image:url("files/content/mood-images/beach.jpg");
background-repeat:no-repeat;
background-position: right center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Ich weiss, das ist jetzt noch eine riesen Sauerei und ein Chaos, aber im Moment probiere ich einfach Sachen aus, nur um überprüfen zu können, ob eine Idee überhaupt funktionieren könnte. Bereinigen und sauber aufbauen würde ich es dann später schon.
CSS: Hintergrundbild mit spezieller Breite
Zitieren
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Lesezeichen