3
Ich benutze Foundation Grid, aber ich muss dieses Raster halten und eine absolute linke und rechte Spalte mit einem Bild für die volle Breite machen, habe ich schon die rechte Seite mit Bild und linke Seite gemacht mit Text und grauem Hintergrund. Aber ich kann nicht dasselbe machen, dass das Bild auf der linken Seite und der graue Hintergrund auf der rechten Seite sein sollte.absolutes Bild linke Seite im Container
enter code here
<div class="form-banner form-banner--medium form-banner-placement--right">
<div class="form-banner-container">
<div class="form-banner-wrapper form-banner-wrapper--original"><img src="https://dummyimage.com/600x400/blue/fff&text=image+here">
<div class="form-banner-left">
<div class="row">
<div class="columns"><span class="tag">recommended</span>
<div class="spacer-15"> </div>
<h3>Monitoring</h3>
<div class="spacer-30"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias distinctio explicabo suscipit eligendi ratione asperiores unde amet expedita vero numquam magnam officiis veniam natus tempora in vel, ipsam cupiditate dolorem.</p>
<div class="spacer-40"> </div><a class="button secondary small">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
.form-banner {
position: relative;
background: white;
overflow: hidden;
}
.form-banner img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.form-banner-container {
max-width: rem-calc(1200);
height: 100%;
margin-left: auto;
margin-right: auto;
padding-left: rem-calc(20);
padding-right: rem-calc(20);
}
.form-banner-wrapper {
height: 100%;
margin: 0 -9600rem;
padding-left: 9600rem;
padding-right: 9600rem;
position: relative;
z-index: 0;
}
.form-banner-wrapper:before {
content: "";
z-index: -1;
width: 50%;
background-color: gray;
}
.form-banner-placement--right.form-banner .form-banner-wrapper {
padding-bottom: rem-calc(100);
}
.form-banner-placement--right.form-banner .form-banner-wrapper img {
position: absolute;
top: 0;
right: 9600rem;
left: 50%;
bottom: 0;
z-index: -2;
height: 100%;
width: 50vw;
object-fit: cover;
object-position: 50% 50%;
}
.form-banner-placement--right.form-banner .form-banner-wrapper:before {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.form-banner-placement--right.form-banner .form-banner-wrapper:after {
position: absolute;
top: 0;
right: 0;
left: inherit;
bottom: 0;
content: "";
background-color: #ffffff;
opacity: 0.8;
z-index: -1;
width: 50%;
}
.form-banner-placement--right.form-banner .form-banner-wrapper-- original:after {
opacity: 0;
z-index: 0;
}
.form-banner-placement--right.form-banner .form-banner-left {
position: absolute;
top: 0;
right: 50%;
left: 9600rem;
bottom: 0;
padding-top: 5rem;
}
.form-banner--large .form-banner-left {
padding: rem-calc();
}
.form-banner--920px .form-banner-left {
padding: rem-calc();
}
.form-banner--125 {
height: 85;
}
.form-banner--125 .form-banner-left {
padding: rem-calc(160);
}
.form-banner--large {
height: 920px;
}
.form-banner--medium {
height: 466px;
}
I prived Code auf codepen Codepen
Ich werde für ein wenig mehr Klarheit zu fragen, haben, was Sie versuchen, hier zu erreichen. Sie möchten das Bild und den grauen Hintergrund tauschen? – A1raa
Ich möchte das Bild nach links verschieben und Text mit grauem Hintergrund nach rechts –