make div center with water mark css

Question

I want to put watermark-text at the center of page. but it's not work it always go to the left of page. I try to use top and left with the #background element but the font-size of #watermark-text get smaller how can I put #watermark-text in the center without change the font-size.

#background {
  position: absolute;
  background: white;
  z-index: 0;
}

#content {
  z-index: 1;
}

#watermark-text {
  position: absolute;
  color: #eae9e9;
  font-weight: bold;
  font-size: 800px;
}

<div id="background">
  <p id="watermark-text">WaterMark</p>
</div>
<div id="content" </div>

Note: you have a typo in your code `
`. Better use flexbox to center elements.... — Sfili_81, Jan 25 '23 at 09:53
Does this answer your question? [How can I vertically center a div element for all browsers using CSS?](https://stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css) — Stanislav Kvitash, Jan 25 '23 at 09:55

Steve Walson · Answer 1 · 2023-01-25T10:12:16.510

1

I've used display: flex; align-items: center; justify-content: center; on the parent to center the child horizontally and vertically and in order to achieve that we need to set a height and a width to the parent.

#background {
  height: 100vh;
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#content {
  z-index: 1;
}

#watermark-text {
  color: #eae9e9;
  font-weight: bold;
  font-size: 800px;
}

<div id="background">
  <p id="watermark-text">WaterMark</p>
</div>
<div id="content"> </div>

edited Jan 25 '23 at 10:12

answered Jan 25 '23 at 09:55

Steve Walson

450
3
7

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Jan 25 '23 at 10:03
I've used display: flex; align-items: center; justify-content: center; on the parent to center the child horizontally and vertically and in order to achieve that we need to set a height and a width to the parent. – Steve Walson Jan 25 '23 at 10:06
add it in your answer not in comments please. – Sfili_81 Jan 25 '23 at 10:07

Adam · Answer 2 · 2023-01-25T10:30:22.480

If by watermark you mean text that overlays the screen with text then you can do it very simply by setting the body to position: relative. This means that when we set the background div with position: absolute and inset:0, the watermark is positioned relative to the body element. This makes the background div cover the whole page.

Use grid and place-items center to put the text in the center of the screen. I've coloured the background and set opacity on the text so you can see that it's overlaid the content.

Note: I've set the font size a percentage of the viewport width using the vw unit so as you make the screen bigger, the watermark increases in size to suit. You can set this to a pixel value or, even better, rem or em.

If you want the watermark not to move with the screen scroll, change position: absolute to position: fixed.

Any questions, just pop a comment in and I'll respond.

body {
  position: relative;
  margin: 0;
}

#background {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #eae9e9;
  background-color: rgba(0, 192, 0, 0.5);
  opacity: 0.5;
  font-weight: bold;
  font-size: 15vw;
}

<div id="background">WaterMark</div>
<div id="content">
  <img src='https://picsum.photos/id/237/400/900'>
</div>

score 0 · Answer 3 · answered Jan 25 '23 at 09:56

#background {
  position: fixed;
  background: white;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: -10;
}

#content {
  z-index: 10;
  width: 100vw;
  height: 100vh;
  color: black;
}

#watermark-text {
  color: #eae9e9;
  font-weight: bold;
  font-size: 800px;
}

<div id="background">
  <p id="watermark-text">WaterMark</p>
</div>
<div id="content">jlsgdfjlgdsfjodfgjoifdgjasfddddddddddds<br>joiasjoidsajoasfds </div>

This is how I would do it looks strange in the editor but should work perfectly on the page, alternative you can just set a background to the div itself where to content is, be aware that this won't be secure as anyone can just change the HTML and CSS clientside anyway.

score 0 · Answer 4 · answered Jan 25 '23 at 10:23

0

.watermark {
    /* Used to position the watermark */
    position: relative;
}

.watermark__inner {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Absolute position */
    left: 0px;
    position: absolute;
    top: 0px;

    /* Take full size */
    height: 100%;
    width: 100%;
}

.watermark__body {
    /* Text color */
    color: rgba(0, 0, 0, 0.2);

    /* Text styles */
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;

    /* Rotate the text */
    transform: rotate(-45deg);

    /* Disable the selection */
    user-select: none;
}

answered Jan 25 '23 at 10:23

Paritosh kumar

1
1

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Jan 25 '23 at 10:46
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 26 '23 at 11:24

make div center with water mark css

4 Answers4