Putting a Title Over An Image

Question

Hello this is me really dipping my toe into a deep coding project. I think if i can learn to do this i will have come far. I feel quite pleased with my effort so far but i'd love a bit of help as i seem to be unable to do what i was hoping.

I use Drupal. You can view the PAGE THAT I AM WORKING UPON HERE

I have managed to add a block region to my page.tpl (dont worry this isnt a drupal problem) My block region contains an image. I was wanting to print my title over the top of the image. It doesnt seem to be happening.

    <?php if ($has_header): ?>
 <!-- Header -->
  <header id="header" class="container-wrapper">
   <div class="container">
         <?php print render($page['header']) ?>

     <?php if ($title): ?>
     <?php print $breadcrumb ?>
     <?php print render($title_prefix) ?>
     <h1><?php print $title ?></h1>
     <?php print render($title_suffix) ?>
     <?php endif ?>
     <?php print $messages ?>
    <?php print render($page['help']) ?>
    <?php if ($tabs): ?><?php print render($tabs) ?><?php endif ?>
    <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links) ?></ul><?php endif ?>
   </div>
</header>
<?php endif ?>

the print render page header bit in line 5 above is the block region 'header' with my image. I was hoping to have the title left middle on top of the image.

Could anyone advise more?

Thanks edit to add-

    <header id="header" class="container-wrapper">
<div class="container contextual-links-region">
 <div class="region region-header">
<h2 class="element-invisible">You are here</h2>
<div class="breadcrumb">
 <a href="/">Home</a>
 </div>
 <h1>football</h1>

thanks for the input chaps. I am just using a theme that someone else made. I will look into sorting that once im done here keyboardsmasher thanks. errrrrrr i will go have a look Santz. again its all done in the template. i think it could be this although it is also using Twitter bootstrap as a base theme h1 { margin: 0 0 20px 0; } — Reg Gordon, Apr 07 '13 at 03:39
ive edited the orignal post to add some html which displays in firebug. might be my breadcrumb thats creating the div thats putting it on a new line. ill go read up below... — Reg Gordon, Apr 07 '13 at 03:42

monkeyhouse · Answer 1 · 2013-04-07T04:02:23.987

0

I assume you're asking to locate a title/text over an image? Do something like this. http://jsfiddle.net/b5Qaj/2/

Make an outer container div that contains both the title and the image. Make sure to style it with a relative position. Then position the title text absolute (this positions it relative to container div)...

<div id="container" style="position:relative;">
    <img src="http://www.hoagames.com/thumbs/1-on-1-soccer.jpg" />
    <h1 style="position:absolute; top:100px; left:20px;"> This text is on top of the image </h1>    
</div>

edited Apr 07 '13 at 04:02

answered Apr 07 '13 at 03:41

monkeyhouse

2,875
3
27
42

You don't appear to understand how HTML tags work. You've got
and
instead of and . – crimson_penguin Apr 07 '13 at 03:42
Browsers are incredibly lenient, and in fact what you had was sort of valid. It just made more elements instead of ending the ones you already had. But in HTML you don't have to end most tags anyway (they end implicitly when either their parent ends, or an element that isn't allowed inside them is encountered). Also note, /> is XHTML (where you DO have to end every tag), and means nothing in HTML. – crimson_penguin Apr 07 '13 at 03:47
im in a right old mess arent i? i suppose if i had enogh knowledge of these things i could make my own template and make my own mistakes. As im just using one made by someone else im a little out my depth. I tried this and following user177's example but i failed miserably as my page shows

– Reg Gordon Apr 07 '13 at 03:51
I should note though that on your website - as of now - the styles dont seem to be rendering. as in it shows the h1 title. but there is no styling within that tag? – monkeyhouse Apr 07 '13 at 04:05
thanks user1777. Its still sitting with the title below my image though. Im going to have to leave it for the night as its 5am here. im a dirty beast of a man by trying to sort it with #block-views-taxtermm-block-2 { z-index:-2;} and h1 {margin: -71px 0 20px; z-index:4;} but even that never worked. Sorry about my poor html/css skills. its taken me about 7 years to get this bad. – Reg Gordon Apr 07 '13 at 04:09
that might have been me user177. ive put it back the way it was. ill get stuck back into it when i get up. my css/html have all been learnt via google in my time. Its lost me friends and family :( – Reg Gordon Apr 07 '13 at 04:11
i dont know if this maybe should be moved over to the drupal stackexchage as it might be all the divs that drupal is adding to things that isnt making this happen – Reg Gordon Apr 07 '13 at 04:19
possibly - what I was trying to say was that the styling you indicated in the comment isn't showing up. Right click on the title and select "inspect element". You'll notice the inline styling isn't there. – monkeyhouse Apr 07 '13 at 04:23

score 0 · Answer 2 · edited May 23 '17 at 12:29

This is a lot more flexible than using absolute positioning to put text over your image and is much more responsive. For this to work you need to know the image size before hand which you usually do. This will let you add overlay text, titles etc. with no negative padding or absolute positioning. They key is to set the padding % to match the image aspect ratio as seen in the example below. I used this answer and essentially just added an image background. Then position your title, buttons etc. inside of main like you usually would.

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain !important;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 800/600 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>

Putting a Title Over An Image

2 Answers2