Centering Text in Div without using BR tags

• 

  ifdc1974 · Member · Oct 7, 2014 at 9:10 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have made a div with a background image. I want to center my text both width and height-wise. I know I’ve done this the wrong way by adding tags. So I need to know how to write the CSS and HTML without that. I want it to look just like it does on this page (the last image with text over it) but without the tags.

  http://ifdcorg.wordpress.com/2scale/

  Current CSS:

  }
  }
  .section-background-two {
  		background: url(https://ifdcorg.files.wordpress.com/2014/10/2scale_market_new.png) no-repeat;
  		z-index:1;
      min-height: 1172px;
  		width:100%;
  }

  Current HTML:

  <div class="section-background-two">
  <h3 style="text-align:center;color:#ffffff;">Supporting Agribusiness Clusters</h3>
  <p style="text-align:center;color:#ffffff;">2SCALE develops and supports agribusiness clusters that  link farmers to buyers, technical support providers, banks and  other partners,helping them to access profitable markets for their crops.</p>
  <h2 style="text-align:center;font-size:12px;line-height:1;color:#ffffff;">DOWNLOAD THE 2SCALE BROCHURE ></h2>
  </div>

  Thanks for your help.

  Heather

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

• 

  thesacredpath · Member · Oct 9, 2014 at 5:29 pm

  • Copy link

  Heather, I see you have changed things a little from the code you have above and set the image in .section-background-two as fixed with /cover.

  With your old code, you could remove the breaks and empty paragraph and add a top padding declaration to .section-background-two of about 35%.

  .section-background-two {
      background: url("//ifdcorg.files.wordpress.com/2014/10/2scale_market_new.png") no-repeat center center rgba(0, 0, 0, 0);
      min-height: 1172px;
      overflow: hidden;
      width: 100%;
      z-index: 1;
      padding-top: 35%;
  }