How can I create watermark on a web page?

Discussion in 'Website Development & Design' started by ballysports, Jun 4, 2014.

  1. ballysports

    ballysports
    uix_expand uix_collapse
    New Member

    Joined:
    May 28, 2014
    Messages:
    1
    Likes Received:
    0
    I am Bally Chohan
    I am Designing a website and I am in real trouble as I don't know how to create watermark on webpage
    please help me out
     
  2. mehrishaly

    mehrishaly
    uix_expand uix_collapse
    New Member

    Joined:
    Apr 17, 2014
    Messages:
    21
    Likes Received:
    1
    Just add a line with your name with a little blur. You can do this through photoshop
     
  3. kenzo

    kenzo
    uix_expand uix_collapse
    Member

    Joined:
    Feb 11, 2013
    Messages:
    173
    Likes Received:
    17
    In html, you can wrap all your content in some div and make it be stretched on whole page, make it's background transparent and add your watermark as a background image. Then, with background-position attribute you can position in anywhere you want to. You can also set transparency with opacity attribute. Also, don't forget to set proper z-index if you are using it for other elements on your website ;)
     
  4. AJKpeter

    AJKpeter
    uix_expand uix_collapse
    Member

    Joined:
    Nov 14, 2011
    Messages:
    390
    Likes Received:
    7
    I believe that easiest way is to use css for that
     
  5. Fergal

    Fergal
    uix_expand uix_collapse
    Premium Member
    Premium Member

    Joined:
    Nov 18, 2007
    Messages:
    10,575
    Likes Received:
    1,165
    Can you please expand on that by explaining how?
     
  6. boysingh

    boysingh
    uix_expand uix_collapse
    Member

    Joined:
    Feb 12, 2014
    Messages:
    301
    Likes Received:
    20
    ahahahaha, yeah, please provide more details about that, because all I know is for that watermark to happen, I have to use photoshop first..
     
  7. zeropid

    zeropid
    uix_expand uix_collapse
    Member

    Joined:
    Oct 24, 2011
    Messages:
    392
    Likes Received:
    12
  8. thaversantosh

    thaversantosh
    uix_expand uix_collapse
    Member

    Joined:
    Jul 9, 2014
    Messages:
    68
    Likes Received:
    2
    There are two different way to put the water mark on the web page . The first is with the style sheet , you simple set the back ground image on your page to be fixed and no- repeat .and modern browser will create the water mark of the web page .
     
  9. ketusoftware

    ketusoftware
    uix_expand uix_collapse
    Member

    Joined:
    Apr 5, 2014
    Messages:
    64
    Likes Received:
    2
    enter the text and make it very light in the background image, so that you can see that the watermark is very light and your image cannot be copied by anyone.
     
  10. Anh

    Anh
    uix_expand uix_collapse
    Member

    Joined:
    Feb 24, 2011
    Messages:
    48
    Likes Received:
    1
    There are two different ways you can put a watermark on your page. The first is with style sheets. You simply set the background image of your page to be "fixed" and "no-repeat", and modern browsers will create a watermark of the image.
     
  11. kaufenpreis

    kaufenpreis
    uix_expand uix_collapse
    Member

    Joined:
    Jun 12, 2014
    Messages:
    68
    Likes Received:
    1
    Watermarks are easy to create using three CSS style properties:
    background-image
    background-repeat
    background-attachment

    You use background-image to define the image to use as your watermark, background-repeat to make it display only once, and background-attachment to turn it into a watermark.

    Add the following to the HEAD of your Web page. Change the URL to your background image, and you'll have a watermark:
    <style>
    <!--
    body {
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    //-->
    </style>

    If you want to place the watermark in a specific location on your Web page (say, the middle of the page), add the background-position property to your style to place the image.
     
  12. andrewc

    andrewc
    uix_expand uix_collapse
    Member

    Joined:
    Nov 12, 2013
    Messages:
    175
    Likes Received:
    21
    A background may not be best, depending on what the background is. A user could easily scroll down until there is no watermark or print a page without background images. The best way would be to use an image and slap it on top of the page, fix it, and then make it transparent so the user can still read content:

    img {
    opacity: 0.4;
    position: fixed;
    top: 50%;
    bottom: 50%;
    }
     
  13. ron13315

    ron13315
    uix_expand uix_collapse
    New Member

    Joined:
    Jul 31, 2014
    Messages:
    21
    Likes Received:
    3
    use a div or images with the opacity
     

Share This Page