We help IT Professionals succeed at work.

CSS rule to position text exactlly over background image

purplecrayon
purplecrayon asked
on
I'm trying to position a scrollable block of text exactly over a postcard featured in the background image in my header div (so that the text seems to be written on the postcard).

I've created a CSS rule named "#header p," but I don't know what to put in that rule. Placement? Clip? Padding? Margin? I'm assuming I have to somehow give it exact parameters for top, bottom, right and left.

Could someone help me out?

I'm using Dreamweaver, BTW.

Thanks!

PS: I'm new to EE and to me, every question I don't know the answer to seems hard. If I'm doing a bad job of assigning points, please let me know. :/

Comment
Watch Question

Commented:
Can you explain what you mean by scrollable?
Chinmay PatelChief Technology Ninja
Distinguished Expert 2019

Commented:
Hi purplecrayon,
Are you looking for this?
http://www.w3schools.com/Css/pr_background-attachment.asp
Set the background-attachment property to fixed and let me know whether this is what you are looking for.
Regards,
Chinmay


Commented:
Generally I would say just put in some padding to space text from the edge of the DIV.  Not exactly sure what you mean by scrollable text though.

Author

Commented:
Zouleous, by scrollable, I mean if the text extends beyond the allotted space, then a scroll bar will appear beside it.

Chinmay_Patel, thank you, but it's not the background image I'm trying to position, but the text.

I'm attaching a small image of the site. I want the text to position over the postcard, so it seems to be part of the postcard.

screenshotsmall.jpg
I figured it out.

I deleted the rule for "#header p" and created a new div within the header called headertext. then I made a new rule for headertext as follows:

position: relative;
    left: 420px;
    height: 200px;
    width: 190px;
    top: 185px;
    overflow: scroll;
    font-size: 12px;
    font-family: "Comic Sans MS", cursive;

It worked! Success is sweet.

Zouleous and Chinmay, thank you for your responses.

Commented:
You can use the below code for scrollable text for your site

#header{
width:200px;
height:100px;
overflow:auto;
}
#header p{
      margin:10px;
}

Hope this work

 - Ashok

Author

Commented:
Ashok, besides being scrollable, the text had to be positioned in a very specific, small part of the header.

I may have asked the question badly - I'm learning, and sometimes don' t even know enough to ask a proper question. But I did find a solution on my own, so have applied to close this question.

Thanks for the code, though.