2

How do I overlay a paragraph of text over the image (homepagepic.jpg) in the middle of the page. I want to write a bunch of text over the image, I have done quite a lot of research but I haven't come across much to be honest. Thanks very much indeed in advance

HTML:

<center>
   <h1>Welcome To The Kingston University Survey Page</h1>
</center>
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
<br/>
<div id="buttons">
    <button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
    <button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
    <a href="http://www.w3schools.com/html/">LogIn</a>
</div>
<br/><br/><br/><br/><br/><br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
  &copy; 
  <img class="social-badge" src="facebookpic.png" alt="facebook logo" onclick="window.location.href='http://www.facebook.com'">
  <img class="social-badge" src="twitterpic.jpg" alt="twitter logo" onclick="window.location.href='http://www.twitter.com'">
</div>

CSS:

h1 {
    margin:0px;
    padding:0px;
}
body {
    background-color: #A9D0F5;
}
#middlepic {
    display: block; margin: 0 auto; 
} 
#uni { 
    display: block; width: 200px; height: 175px; float:left; 
} 
#footer { 
    width: 100%; height:100px; display: inline-block; text-align: center; 
}
#buttons {
    display: block;       
    margin: 0 auto;
    width: 50%;
}
button { 
    height: 30px; 
    width: 200px; 
    background-color: #ccc; 
    border-radius: 10px; 
} 
a { 
    text-decoration: none; color: #000; 
}
.social-badge {
    width: 40px;
}
Mardzis
  • 760
  • 1
  • 8
  • 21
Hollywood
  • 175
  • 1
  • 2
  • 13
  • possible duplicate of [Text overlay on image](http://stackoverflow.com/questions/18631530/text-overlay-on-image) – T J Dec 30 '14 at 12:32

4 Answers4

1

Why dont you make a new div and put the homepagepic.jpg as its background and then write in that div.

<div id="written">
This text is over the image
</div>

and in CSS

#written
{
    background-image : url(***** here comes the url of image homepagepic.jpg*****);
}
MegaMind
  • 653
  • 6
  • 31
0

Use CSS

background-image: url('kingstonunilogo.jpg');
Mardzis
  • 760
  • 1
  • 8
  • 21
  • thanks for your response, bit more clarification would be much appreciated – Hollywood Dec 30 '14 at 11:55
  • I think this is the best possible solution better than different absolute positioning. With this solution you can prevent problems with usability on mobile phones, etc. and in older browsers. – Mardzis Dec 30 '14 at 11:59
0

A semantic approach would be to use a figure element with an absolutely positioned figcaption.

Something like this:

figure { position: relative; }
figcaption { 
    position: absolute; 
    top: 0; left; 0;
}
<figure>
    <img src="http://placehold.it/240" />
    <figcaption>This is overlay text.</figcaption>
</figure>
Abhitalks
  • 27,721
  • 5
  • 58
  • 81
0

If you don't want to use background-image use position:absolute for the paragraph http://jsfiddle.net/8cup75k3/

p{
   width:500px;
   position:absolute;
   margin-top:-100px;
   color:green;
}
Akshay
  • 14,138
  • 5
  • 46
  • 70