Designing a watermark using HTML and CSS techniques

I'm searching for a way to design a cross-website transparent watermark using just HTML and CSS. I am unsure of how to ensure that it remains locked in one position, such as the right bottom side of the browser window.

htmlcsswatermark

Answer №2

For a permanent fix, consider the following method:

Check out this jsFiddle for reference: http://jsfiddle.net/FOzrK/

<div class="content">Here is an example of content Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of contentHere is an example of contentHere is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    x
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    Here is an example of content
    <div class="overlay">
            Sample Overlay
    </div>
    Here is an example of content
    Here is an example of contentHere is an example of contentHere is an example of content
</div>



.overlay {
    opacity: 0.5;
    color: BLACK;
    position: fixed;
    top: auto;
    left: 80%;
}

If you prefer using absolute positioning:

.overlay {
    opacity: 0.5;
    color: BLACK;
    position: absolute;
    bottom: 0;
    right: 0;
}

Refer to this updated jsFiddle demo: http://jsfiddle.net/HGKPD/

Answer №3

To achieve the desired effect, you can apply 

opacity:0.5;//any value between 0 and 1
.

See it in action on this demo

Answer №4

While other solutions may be effective, they often fail to address the issue of the watermark being unintentionally selected when using the mouse for selection. To prevent this, you can use the following fiddle: https://jsfiddle.net/MiKr13/d1r4o0jg/9/

This approach is especially suitable for PDFs or static HTML documents.

CSS:

#watermark {
  opacity: 0.2;
  font-size: 52px;
  color: 'black';
  background: '#ccc';
  position: absolute;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  right: 5px;
  bottom: 5px;
}

Answer №5

.watermark{
color:blue;
background-color:rgba(0, 255, 255, 0.7);
height:40px;
width:120px;
display:flex;
align-items:center;
justify-content:center;
position:absolute;
bottom:10px;
right:10px;
}
<html>
<body>
<div class="watermark">
UniqueWorld
</div>
<pre>

































</pre>
</body>
</html>

Answer №6

If you're looking to enhance your web design skills, I highly recommend diving into CSS grids. Since around 2017, most browsers have been supporting this feature. For detailed guidance, check out this documentation: https://css-tricks.com/snippets/css/complete-guide-grid/. Using CSS grids makes it a breeze to position page elements exactly where you want them, particularly when dealing with responsiveness. It only took me 20 minutes to learn the basics, and I consider myself a beginner!

<div class="grid-div">
    <p class="hello">Hello</p>
    <p class="world">World</p>
</div>


//begin css//

.grid-div {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
}

.hello {
    grid-column-start: 2;
    grid-row-start: 2;
}

.world {
    grid-column-start: 1;
    grid-row-start: 2;
}

This code divides the page into four equal quadrants, positioning "Hello" in the bottom right and "World" in the bottom left without needing to adjust their positions or margins.

You can create intricate grid layouts, including overlapping elements, grids of various sizes, and nested grids, all while maintaining control over your design even as things evolve (yes, Microsoft Word, we see you).

I hope this information proves useful for those still exploring CSS grids!

Answer №7

This information could prove to be very useful for you.

div.picture
{
width:500px;
height:250px;  
border:2px solid;
border-color:#CD853F;
}
div.container
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid;
border-color:#CD853F;
opacity:0.6;
filter:alpha(opacity=60);
}
   div.container p
{
margin:30px 40px;
font-weight:bold;
color:#CD853F;
}

Be sure to take a look at this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to generate an excel document from an HTML table and store it in the project folder

I have created an HTML table with loaded data and now I am looking to convert it into an Excel file and save it in the project directory. Below is the HTML Table structure: <table class='tblNemoList' border='1' cellpadding='3 ...

javascriptphpjqueryexcelhtml

Position the image on the right side of several lines of text

My webpage contains two div elements: one for displaying multi-line text and the other for showing an image which is positioned to the right of the text. The width of the image is not fixed and can be adjusted using a user-defined parameter. <div> ...

htmlcss

The `margin:auto;` property does not function properly with inline-block elements

I recently adjusted my "container" div by changing it to an inline-block. Previously, I had applied margin:auto; to center it, which worked well with a specified width. Original Code (functional) #container { border: 1px solid black; height: 2 ...

htmlcssmargin

Display a pop-up alert following the completion of form validation using JavaScript

I am currently learning JavaScript and working on an enrollment form that requires validating a cellphone number with 11 characters. The issue I'm facing is that every time I hit submit, the page refreshes instead of displaying the validation message. ...

javascriptcssvalidationbootstrap-4popup

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

javascripthtmlcssangularjsangular-material

Aligning an element in the middle of an image vertically

Trying to vertically center a div inside an image element has been challenging. While there are many ways to achieve vertical centering in general, this specific case presents unique difficulties. To accomplish this, the following minimum code is needed: ...

htmlcss

What does the HTML and JS code look like when using Next.Js?

Here's an illustration of the desired result: codepen.io/j0be/pen/jWGVvV How can I implement this HTML and JS in Next.js? I am looking to customize this code using TypeScript and SCSS in Next.js. However, I am unsure about how to convert the HTML an ...

javascripthtmlreactjssassnext.js

Enhancing the dropdown menu with a fixed value

In another file, I have a dropdown menu generated using a while loop. I want to include one static value (Select contract) in the dropdown. Currently, the dropdown looks like this: 1234 4321 2323 3232 I would like it to look like this: Select contract ...

phphtmlsql

Arranging search results in Django from the get_queryset method

I am currently using Django 2.2.10 as my framework for a project. I have implemented a search bar that returns search results to the show page, utilizing the `get_queryset(self)` method in the SearchResultsView (ListView) class. I have configured paginate_ ...

pythonhtmldjango

Problem Alert: Click Event Not Functioning on Generated Links

Take a look at these two code snippets. Despite other jQuery functions in the same JS file working fine on the UL element, nothing seems to be happening with these. Is there something obvious that I am missing? <ul id="activityPaganation" class="paga ...

javascriptjqueryhtml

Tutorial on achieving full screen height for Bootstrap card within a column

I am working on a React grid layout with two cards, each in one column. My goal is to make the card on the left fill the entire column height (screen height), and if its content expands, have a scrollbar while keeping the second card intact and aligned to ...

htmlcssbootstrap-4react-bootstrap

Ways to position Bootstrap 4 navbar elements at the bottom

Struggling to adjust the alignment of the text in the navbar items using Bootstrap 4? My initial thought was to align them at the bottom of the ul and then position the ul accordingly, but I'm facing challenges with both. The objective is to have the ...

csstwitter-bootstrapbootstrap-4

What is preventing me from accessing the php page using the AJAX request?

I am encountering an issue with my HTML and PHP code. I am successfully able to receive the mail.value in txt, but facing a problem during the AJAX call as it doesn't even go into the error function. I need assistance in identifying and rectifying th ...

phphtmlajax

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

javascriptjqueryhtmlcss

Adobe Muse v7 is experiencing a mobile site height error

Facing an issue with Adobe Muse altering the height of my website when previewing on iPhone 6. Despite correct dimensions, there is still a mysterious extended vertical white line below the page. Any ideas for fixing this? Best regards ...

htmliosiphoneadobemuse

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

I am attempting to encrypt a .php file using phpBolt. It works fine when the file contains only PHP code, but it fails when there is a mixture of HTML and PHP. Here is the encryption code: <?php /** * src : source folder * encrypted : Output folde ...

phphtmlencryption

Showing the values of selected checkboxes in a select dropdown - here's how!

Link to the jsfiddle : https://jsfiddle.net/a1gsgh11/9/ The JavaScript code seems to not be working on the js fiddle platform. My main concern is that I would like the selected checkbox values to display immediately without needing to submit any buttons. ...

javascriptphpjqueryhtmlcheckbox

Is there a way to adjust the font size for the label in mat-step?

Is there a way to update the design using only inline styles and CSS? Below is the code snippet I am working with: <div class="statusbar"> <mat-horizontal-stepper linear > <mat-step label="One" [complet ...

htmlangularfont-size

Changing the text of a button using ngClass in Angular's toggle functionality

Is there a way to modify the text of a toggled button class in Angular using Bootstrap? Currently, I have this code to toggle the class: html <!-- toggle button --> <button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status ...

javascripthtmlangularbootstrap-4

Using the preg_match_all function to extract images with specific file extensions and dimensions from a given URL

As a beginner in PHP, I am currently working on extracting images from a given URL using the following PHP expression: @preg_match_all("<img.+?src=[\"'](.+?)[\"'].+?>", $homepage, $matches, PREG_SET_ORDER); However, this express ...

phphtmlregeximagepreg-match-all