I want to build a container in my React project, that consists of a background image and text lying on top of it.
Basically, I have also built this container already some time ago (I thought). But now I have seen that on a mobile device because of the address bar the image is rescaled every time the scroll direction changes, which looks very broken.
I have already read this thread . However, since I don't want to set the image as background on the whole page (but only in this one container), I don't think this solution works.
I also don't want to use solutions like transition: height 999999s
, because this would break the webpage when rotating the screen.
My code where this problem occurs looks like this:
HTML Code:
<div>
<section>
<h2>Container Before</h2>
<p>SOME RANDOM TEXT</p>
</section>
<section className="section">
<div className="imageContainer">
<div className="innerContent">
<h2>Random Text</h2>
<p>
Received the likewise law graceful his. Nor might set along charm
now equal green. Pleased yet equally correct colonel not one. Say
anxious carried compact conduct sex general nay certain. Mrs for
recommend exquisite household eagerness preserved now. My improved
honoured he am ecstatic quitting greatest formerly. Extended
kindness trifling remember he confined outlived if. Assistance
sentiments yet unpleasing say. Open they an busy they my such
high. An active dinner wishes at unable hardly no talked on.
Immediate him her resolving his favourite. Wished denote abroad at
branch at. Ham followed now ecstatic use speaking exercise may
repeated. Himself he evident oh greatly my on inhabit general
concern. It earnest amongst he showing females so improve in
picture. Mrs can hundred its greater account. Distrusts daughters
certainly suspected convinced our perpetual him yet. Words did
noise taken right state are since. You disposal strongly quitting
his endeavor two settling him. Manners ham him hearted hundred
expense. Get open game him what hour more part. Adapted as smiling
of females oh me journey exposed concern. Met come add cold calm
rose mile what. Tiled manor court at built by place fanny.
Discretion at be an so decisively especially. Exeter itself object
matter if on mr in. Sussex on at really
</p>
</div>
</div>
</section>
<section>
<h2>Container After</h2>
<p>SOME RANDOM TEXT</p>
</section>
</div>
CSS Code:
.section {
background-color: black;
}
.imageContainer {
width: 100%;
position: relative;
padding: 5rem 0;
overflow: hidden;
}
.imageContainer:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url(https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=2000);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 5.4% 0;
opacity: 0.5;
}
.innerContent {
padding: 2rem 1.5rem;
margin: 1rem auto;
width: 100%;
position: relative;
z-index: 9;
text-align: left;
color: white;
opacity: none;
}
@media screen and (min-width: 768px) {
.innerContent {
width: 750px;
}
}
@media screen and (min-width: 992px) {
.innerContent {
padding: 2rem 10rem;
width: 980px;
}
}
@media screen and (min-width: 1200px) {
.innerContent {
width: 1170px;
}
}
@media screen and (min-width: 1400px) {
.innerContent {
width: 1370px;
}
}
Thanks in advance for any help!
Best regards, Brian