Text centered over responsive image

Report · Aug 14, 2017

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.

<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;

}

Report · Aug 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>

<head>

<title>Bootstrap 3.3.7 Starter</title>

<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>

<h1>Heading 1</h1>

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

</header>

CONTENT GOES HERE....

</div>

</script>

</body>

</html>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 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.

Report · Aug 14, 2017

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 14, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
Why don't you put your image in the CSS background? It's much easier than positioning text over a foreground image.

That example is NOT going to work because once you give the <header> a specific height, needed to show the background image the text stays where it is, so you need to re-think that.

EDITED.

Well I guess it would work to some extent if you fiddled about with the top/bottom padding but there's a better method - Flexbox.

Report · Aug 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>

<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>

<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>

</div>

</body>

</html>

Report · Aug 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

Report · Aug 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.

Report · Aug 14, 2017

Thanks for taking the time to post the code osgood. One day I hope to be as good as you where I won't need to utilize any kind of framework at all. Your bitterness speaks volumes. Perhaps you're the one who needs a vacation.

Report · Aug 14, 2017

lauram30608920 wrote
Your bitterness speaks volumes.

Not really any bitterness. I can only post code that I have gone out of my way to write, try and test, specifically to solve your issues. If you or other posters cannot follow it (and lets face it I write a detailed explanation of everything you need to do along with the code I provide)..........its more frustration.

If you are producing websites I think you should at least know the basics and centering components vertically and horizontally cant be any more basic than that, so to me you're obviously following the wrong path of learning, that troubles me (that unfortunately is the effects of being dependent on frameworks can have). If you are doing this as some kind of hobby well I'm not interested, (use the code of leave it) you are excused. I'm only here to help out those that want to take web-development seriously and more importantly learning to stand on their own 2 feet when it counts.

lauram30608920 wrote
Perhaps you're the one who needs a vacation.

You're probably correct...........from this forum that now offers nothing positive. I'll consider it and have a report on your desk in the morning.

Report · Aug 14, 2017

Be very carefull with alt text, as it is read by screen readers. It is also considered very bad form to write alt text as was done 5+ years ago, such as -

"an image of xyz" or "a view of our room".

Search engines are now aware of bad alt text, and will deduct points if they are 'generic' descriptions.

If the standard alt text is not sufficient to describe an image then use the 'long description' alternative. Also every image should have an alt text assosiated with it, and if the image is only for decorative purposes, then the alt text should be an empty string, indicated by alt=''

Report · Aug 14, 2017

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

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 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

Report · Aug 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.

Text centered over responsive image

1 Correct answer