How to Delete the Dark Background in Header Image Text for Landing Pages

For our Landing Page page layout, you can insert text in the Header Image area.  We have also inserted a shaded dark background in the Text area so that the text that you insert will show up better.  The dark background for the Header Image Text is there by default and is part of the design.

If you wish to remove the dark background (either you don’t like it or if you decide not to insert any text), here’s how you can do it:

 

 

1) Open main_style.css

Go into Weebly Editor and click  “Design” and into “Edit HTML/CSS”.  On the top left column, you will see “main_style.css”. Click to open the CSS page.

 

2) Locate the code

Depending on the template you are using, there can be two areas where you will find the background code for Header Image Text.

LOCATION #1

#landing-text {

width: 390px;
float: right;
margin-top: 200px;
margin-right: 30px;
background-color: rgba(0, 0, 0, 0.8);
padding: 15px;

}

Delete the code highlighted above to remove the dark background.

 LOCATION #2

#landing-text p, #landing-text h2 {

background-color: rgba(0, 0, 0, 0.8);
padding: 15px;

}

#landing-text div.paragraph, #landing-text h2 {

background-color: rgba(0, 0, 0, 0.8);
padding: 15px;

}

Delete the TWO highlighted codes above to remove the dark background.

3) Save & Publish Change

 

 

Tags: , , , , , , ,