CSS Why is this text invisible?

[SteveMH]

Hi Folks, at the bottom of this page there is a section where the text is invisible:



It is the region with the dark grey background.

There are is a H2 & a P here.

e.g:

<h2 style="text-align: center;">Residential</h2>

The H2 has style:

.block.block-dark h2 {
  color: #ffba0d;
}

yet it is not visible. It doesn't have a low z-index or 0 opacity.

Help appreciated.
Steve

 

[Deleted member 1442]

Provide your code in the BBCode feature, provide more code please.
Or use codepen.io to give us the code.

 

[SteveMH]

OK, here it is: https://codepen.io/SteveMH/pen/KKNgNqB

 

[Deleted member 1442]

Do you want the .jpg file to be the background or the grey background.

 

[Deleted member 1442]

Nevermind, but in css you can't add url image links.

 

[Deleted member 1442]

Or try

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('picture.jpg');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Within the website create a jpg file that holds the picture.

 

[SteveMH]

I can't change the structure of the HTML

The problem is all the text is invisible:

<h2 style="text-align: center;">Residential</h2>
<p style="text-align: center;">We’ve been installing, servicing, and repairing air conditioning systems in people’s homes for decades.<br>
Our experience and expertise allows us to offer the ideal air conditioning system for you</p>

 

[Deleted member 1442]

The gray block is overlaying the text,

.column-bg-img {background-image: url('http://mercury.herodevelopment.com.au/wp-content/uploads/2020/09/Mercury_Residential_Air_Conditioning.jpg');}
.block .block-background-image.bg-scroll {
    background-attachment: scroll;
}
.block .block-background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.block .block-background-image, .block-overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.columns_block .column-bg-img, .columns_block .column-overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.block.block-dark h2, .block.block-white h2, .carousel_block .carousel .carousel-inner .carousel-item .carousel-caption .carousel-caption-inner h3 {
    color: #ffba0d;
}
@media (min-width: 1200px) {
.col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
}

I fixed the css.

 

[SteveMH]

Thanks Sago.

I can't just remove a background colour from the design though.

I've tried:

.columns_block .column-overlay.block-dark {
    background-color: #2d3133;
    z-index: 0;
}
.columns_block .column {z-index: 10;}

Which should stack .columns_block .column above .columns_block .column-overlay.block-dark (they are the same ancestor level) but it doesn't work that way for some reason.

 

[Deleted member 1442]

I don't know anyway else. Sorry. 🙁

 

[Malcolm]

Hey @SteveMH,

Did you figure this one out?