CSS code for Translucent Banner Behind Text

• 

  cassidydobek · Member · Jun 3, 2016 at 3:06 pm

  • Copy link
  • Add topic to favorites

  Hi there. I would like to move the “Welcome! Explore…” message on the front page of my website, https://eomaiacare.com/, to base of the image, as well as add a translucent background similar to this website (http://www.glowmidwifery.com/). I would also like to have the headers of each page have the translucent banner to improve legibility of the text as well, and was wondering what the CSS code was for these. Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jun 6, 2016 at 1:34 pm

  • Copy link

  Hi there, first off, you have an empty paragraph at the bottom of your content on the Welcome section. Edit that and remove that empty paragraph and the give the following CSS a try and see what you think.

  body.hero-image .hero.with-featured-image .entry-footer {
      display: none;
  }
  body.hero-image .hero.with-featured-image {
      padding-bottom: 0;
  }
  body.hero-image .hero.with-featured-image .hentry {
      background-color: rgba(0, 0, 0, 0.3);
      padding-left: 75px;
      padding-right: 75px;
      width: 100%;
  }
  @media screen and (min-width: 1230px) {
  	body.hero-image .hero.with-featured-image {
  		padding-top: 400px;
  	}
  }
  @media screen and (min-width: 1020px) {
  	body.hero-image .hero.with-featured-image {
  		padding-top: 300px;
  	}
  }
  @media screen and (max-width: 767px) {
  	body.hero-image .hero.with-featured-image {
  		padding-left: 0;
  		padding-right: 0;
  	}
  	body.hero-image .hero.with-featured-image .hentry {
  		padding-left: 30px;
  		padding-right: 30px;
  	}
  }

• 

  cassidydobek · Member · Jun 9, 2016 at 11:53 pm

  • Copy link

  I cannot seem to get the above coding to work. When I copy and paste it, the code shows up on the actual web page.

  This is the current code:

  <span style=”color: #ffffff;”> w e l c o m e !

  <span style=”color: #ffffff;”>Explore the impassioned labor doula services, informative childbirth education, and valuable placental medicine that Eomaia offers.

  It is more important to me to have a transparent background, rather than the “padding” to lower the text.

  Still trying to get the CSS code for transparent banner behind text, extending all the way from left to right, like this websites’ header: http://www.glowmidwifery.com/, which is also the same coding as all of the header menus with website title. Thanks!

• 

  thesacredpath · Member · Jun 10, 2016 at 4:30 pm

  • Copy link

  What I’ve given above is custom CSS. Go to Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS.

• 

  cassidydobek · Member · Jun 10, 2016 at 11:59 pm

  • Copy link

  Yes! Thank you sooooo much!

• 

  thesacredpath · Member · Jun 15, 2016 at 5:57 am

  • Copy link

  You are welcome.