1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Text background for a div

Discussion in 'CSS' started by sarahk, Nov 11, 2020.

0
  1. #1
    I've found code that lets me have text as a watermark and I'm wanting something like that but not for the page - just for the div it's attached to. The techniques I've seen all utilise ::before or ::after and absolute positioning. Here's what I get if I change it to relative

    upload_2020-11-12_13-37-46.png

    This is going to be a pdf and it would have the heading repeated behind the text in pale grey.

    I've got a fiddle at http://jsfiddle.net/bteghy3a/

    But obviously, I have some way to go.

    Has anyone done something like this?
     
    Solved! View solution.
    sarahk, Nov 11, 2020 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    qwikad.com, Nov 11, 2020 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #3
    When I add a second div the watermarks overlay each other. The user could choose to have 6+ of these watermarks in a single document.

    upload_2020-11-12_15-26-17.png 

    <div class="watermark">Watermark1 here</div>
<p>Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  </p>
  <div class="watermark">Watermark2 here</div>
  <p>Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
  Text text text<br/>
    HTML:
    body{
    background:#888;
}
p{
    color:white;
}
.watermark
{
position:fixed;
top:0;
left:0;
opacity:0.5;
font-size:2em;
z-index:-1;
color:#000;
}
    Code (CSS):
     
    sarahk, Nov 11, 2020 IP
  4. #4
    qwikad.com, Nov 11, 2020 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    That looks great, thank you!!!
     
    sarahk, Nov 11, 2020 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Honestly I must be having some kind of comprehension issue, as nothing here I'd even call a watermark... hence for the life of me I can't even figure out what the blazes is even trying to be accomplished here.

    Though of course they overlap, they're position fixed which is why they're based on the top corner of the SCREEN, not the content. Did you mean to use position:absolute inside relative parent containers? Oh wait, that's what @qwikad did.

    You could probably lose the parent container by simply not setting ANY positioning (left/right/top/bottom) on the element. That "leaves it where it is" in the layout... in theory.

    http://jsfiddle.net/t1ng58hk/

    A lot of people don't realize that about position:absolute. If you don't set left/right/top/bottom it's removed from flow, but stays where it is.
     
    deathshadow, Nov 12, 2020 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #7
    Right, it's watermark in name only, I am thinking if someone tries to take a screenshot it will always be there.
     
    qwikad.com, Nov 12, 2020 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    In which case I'd use an SVG or PNG of it as a background-image, that way it can be repeated and wouldn't interfere with non-visual appearance. That or perhaps add it with generated content and prevent its selection.
     
    deathshadow, Nov 12, 2020 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #9
    I was struggling to come up with a better word than watermark... put it down to a lack of imagination.

    I'm creating a form system where the client creates forms A, B, & C, users fill them in, data saved and then output as a formatted pdf (we're trying to get the length down from 12 pages). I want to be able to give a format option of having the title repeated as a pale background to break up the page and make things like the terms and conditions a bit less bleak. Because I don't know what the form consists of I can't create the images ahead of time and prefer a CSS approach to generating images on the fly.

    Disclaimer: I'm not a design expert, this might not fly...
     
    sarahk, Nov 12, 2020 IP