Text over image CSS

• 

  keperexdelta · Member · Aug 30, 2016 at 2:33 am

  • Copy link
  • Add topic to favorites

  Hello everyone,
  I am trying to place a text over an image through CSS in my page https://exdeltacom.wordpress.com, I used the tips from this page https://css-tricks.com/text-blocks-over-image/
  and I don’t want to upload an image already with the text. So the code looks like this:

  .image{position: relative;
  width: 100%;
  }

  <h2> <span>Hello World!</span></h2>
  h2 span {position:absolute;
  top: 200px;
  left: 0px;
  width:100%;
  }

  However it doesn’t seem to work at all. What I am missing?

  Thank you
  https://exdeltacom.wordpress.com

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

• 

  thesacredpath · Member · Aug 30, 2016 at 8:20 pm

  • Copy link

  I don’t think that solution is going to work here at WordPress.com. This is one solution. What I’ve done is to use a :before psuedo selector and also use the :first-of-type pseudo to tell the browser to only show the added text on the first paragraph in the content area of the main page, which is the one the image is in. I’ve then use absolute positioning to move it down and over the image. You can adjust the left and top values to position the text where you want it. Make sure and widen and narrow your browser window as the image itself shrinks in size on smaller screens, so you want to make sure the text stays on the image and not pushed off the image on smaller screens.

  .home .entry-content p:first-of-type:before {
      content: "Hello World";
      color: #fff;
      position: absolute;
      left: 50px;
      top: 150px;
      font-size: 150%;
  }

  I’ve also included some styling (font size and color) that you can adjust as desired.

• 

  keperexdelta · Member · Aug 31, 2016 at 2:53 am

  • Copy link

  That worked nicely.

  Thank you

• 

  thesacredpath · Member · Aug 31, 2016 at 6:17 am

  • Copy link

  Hooray and you are welcome!