Skip to main content
L
lauram30608920
Inspiring
August 14, 2017
Answered

Text centered over responsive image

  • August 14, 2017
  • 3 replies
  • 4503 views

I've researched this problem and tried every combination I can possibly think of to no avail. I'm simply trying to overlay text and a button on top of a responsive image. I got the text on top of the image but for some reason it won't center! I've tried text-center, center-block and more combo's with margin's than I can think of. Hopefully it's something simple. Below is the code and screenshot of desired result. Thank you in advance.

<div class="container-fluid no-padding">

         <img src="images/hero_image.jpg" class="img-responsive"/>

    <h1 class="call_to_action_header center-block">Have you had your Annual Wellness Visit?</h1>

<p class="call_info text-center center-block">Medicare covers a yearly appointment to discuss your plan of preventive care in the coming year.</p>

          <button type="button" class="btn btn-primary call_button text-center center-block">More Information</button>

</div>

     

.call_to_action_header {

position: absolute;

color: #FFFFFF;

font-family: montserrat;

font-style: normal;

font-weight: 400;

font-size: 50px;

max-width: 630px;

margin-top: -382px;

}

.call_info {

position: absolute;

color: #FFFFFF;

font-family: montserrat;

font-style: normal;

font-weight: 400;

font-size: 25px;

max-width: 630px;

margin-top: -250px;

}

.btn.call_button {

margin-top: -118px;

position: absolute;

text-align: center;

color: #FFFFFF;

background-color: #E26432;

border-color: #A73A0F;

font-size: 19px;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.no-padding {

padding: 0px;

}

    This topic has been closed for replies.
    Correct answer Nancy OShea

    ALT text displays when browsers can't load the image for whatever reason.  That's its main purpose.

    You should always add ALT attributes to images. That's a given.  But ALT text is not a replacement for HTML content and good HTML5 semantic tags.  This is where the real message & structure comes from.   With that in mind, images and background-images are merely secondary eye candy.

    Also don't overuse ARIA roles.  In most cases, the browsers infer role meaning from the HTML5 semantic tags better without ARIA.  See Latest working draft of ARIA in HTML

    Finally, some WAI Tools to see how you're doing.

    Web Accessibility Evaluation Tools List

    3 replies

    pziecina
    pziecina
    Brainiac
    August 14, 2017

    On holiday again so no example, but for positioning text over a foreground image one could simply use css shapes, which will also keep the text placed as required if the image is resized, such as in rwd layouts.

    It is currently only supported by Chrome/Opera and Safari (android/ios also) in development in firefox and there is an excellent polyfill available from Adobe, which works in all modern browsers from IE10.

    https://alistapart.com/article/css-shapes-101

    O
    osgood_
    Brainiac
    August 14, 2017

    pziecina  wrote

    On holiday again

    I reckon the World and his wife must also be on holiday if the recent activity in this forum is anything to go by.

      O
      osgood_
      Brainiac
      August 14, 2017

      Use  Flexbox, see code below. (Guaranteed to center vertically and horizontally without any hacks). Wrap ALL of your  'overlay' content in a <div> named 'hero-image-overlay'. Add to your 'container-fluid' <div> 'display-flex' with an additional css class 'display-flex' (see css below)  and then style your components within the 'hero-image-overlay' <div> to how you require them......

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="utf-8">

      <title></title>

      <style>

      .container-fluid {

      position: relative;

      background-color: yellow;

      }

      .display-flex {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      -webkit-box-align: center;

      -ms-flex-align: center;

      align-items: center;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      justify-content: center;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -ms-flex-direction: column;

      flex-direction: column;

      }

      .hero-image-overlay {

      position: absolute;

      text-align: center;

      width: 50%;

      }

      .hero-image-overlay h1 {

      font-family: montserrat;

      font-style: normal;

      font-weight: 400;

      margin: 0;

      padding: 0 0 25px;

      font-size: 50px;

      line-height: 60px;

      }

      .hero-image-overlay p {

      margin: 0;

      padding: 0 0 25px 0;

      }

      .hero-image-overlay button  {

      color: #FFFFFF;

      background-color: #E26432;

      border: none;

      padding: 15px 25px;

      font-size: 19px;

      font-family: 'Roboto', sans-serif;

      font-weight: 300;

      }

      </style>

      </head>

      <body>

      <div class="container-fluid no-padding display-flex">

      <img src="images/hero_image.jpg" class="img-responsive"/>

      <div class="hero-image-overlay">

      <h1>Have you had your Annual Wellness Visit?</h1>

      <p>Medicare covers a yearly appointment to discuss your plan of preventive care in the coming year.</p>

      <button type="button">More Information</button>

      </div>

      <!-- end hero-image-overlay -->

      </div>

      <!-- end container-fluid -->

      </body>

      </html>

      L
      lauram30608920Author
      Inspiring
      August 14, 2017

      I've copied this code exactly and can't style it in 'hero-image-overlay' <div>. I can't even change the font color. It is sitting below the image. The button is also off in its own world. I should have mentioned I'm using bootstrap framework, if that matters.

      @Nancy I thought the Alt"" text in an <img> tag was read by screen readers? I would much rather use your solution if it is ADA compliant.

      Thanks,

      Laura

      O
      osgood_
      Brainiac
      August 14, 2017

      lauram30608920  wrote

      I should have mentioned I'm using bootstrap framework, if that matters.

      Nope, it matters not.

      I guess it might be out of your scope to deploy such methods if youre reliant on a framework, sadly that happens a lot and it doesnt really surprise me - I only post code that is tried and tested. You'rs is the 1st actual code question around here in about 5 days, that says everything, people who use DW can't code and are becoming more and more dependent on frameworks, period.

      Nancy OShea
      Nancy OShea
      Adobe Expert
      August 14, 2017

      Why don't you put your image in the CSS background?  It's much easier than  positioning text over a foreground image. 

      As an example:

      <!doctype html>

      <html lang="en">

      <head>

      <meta charset="utf-8">

      <title>Bootstrap 3.3.7 Starter</title>

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <!-- Latest compiled and minified Bootstrap CSS-->

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <style>

      header{

      margin:0;

      padding: 2%;

      background:url(http://lorempixel.com/900/300/abstract/7) center center no-repeat;

      background-size:cover;

      color: #FFF;

      }

      </style>

      </head>

      <body>

      <header class="text-center">

      <h1>Heading 1</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      <p><a class="btn btn-default" href="#">MORE INFO</a></p>

      </header>

      <div class="container">

      <div class="row">

      CONTENT GOES HERE....

      </div>

      </div>

      <!--latest jQuery-->

      <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

      </script>

      <!--Bootstrap-->

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

      </body>

      </html>

      Nancy

      Nancy O'Shea— Product User, Community Expert &amp; Moderator
      L
      lauram30608920Author
      Inspiring
      August 14, 2017

      Thank you for the response, Nancy. The website must be ADA compliant and from my research I found using a background image limited screen readers from recognizing it. Please correct me if I'm wrong or if there is a workaround.

      Nancy OShea
      Nancy OShea
      Adobe Expert
      August 14, 2017

      Screen readers don't recognize foreground images either.  But they do understand HTML text.

      Nancy O'Shea— Product User, Community Expert &amp; Moderator
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices