Need real help with how to position <p> text on top of background image in header? Plz..

My INDEX FILE: <!DOCTYPE html> <html> <head> <title> s.i.m.s productivity </title> <link href="cardesk.css" rel="stylesheet"> </head> <body> <div id="header" class="section"> <p> c.i.m.s productivity </p> </div> <div class="section">  <p> Situation admitting promotion at or to perceived be. Mr acuteness we as estimable enjoyment up. An held late as felt know. Learn do allow solid to grave. Middleton suspicion age her attention. Chiefly several bed its wishing. Is so moments on chamber pressed to. Doubtful yet way properly answered humanity its desirous. Minuter believe service arrived civilly add all. Acuteness allowance an at eagerness favourite in extensive exquisite ye. </p> MY CSS FILE: html{ marging:0; padding:0; } body { font-family: 'Courier'; font-size: 15pt; background-color: #ecf0f1; padding: 0px; margin: 0 auto; width: 800px; } .section{ background-color:#d0d3d4; border-radius:10px; } #header { background-image: url("logo.jpg"); position:cover; padding: 100px; background-repeat: no-repeat; background-position: center; } #header p { font-size: 25pt; color: white; position: relative; top: 10px; left: 60px; } #header h1{

html css help

21st Feb 2018, 5:58 PM

ArtB

2 Answers

+ 2

to what are the "top" and "left" attributes in the #header p referring? try using margin-top and margin-left to add spaces at the top and left sides.

21st Feb 2018, 6:23 PM

storm

Yes, those attributes don't make no sense in this example.. I figure it out . I did as you advise using margin-left(right). It works! Thank you very much.

21st Feb 2018, 6:38 PM

ArtB