Tips for implementing a watermark background image that appears in each section of a single-page website

Currently, I am exploring HTML, CSS, and Bootstrap and facing a particular issue.

I am attempting to add a logo to a website as a background. I have already discovered how to do this by following the instructions here.

This website is comprised of a single HTML file where I have defined multiple sections. Users can navigate to different sections using the menu.

<div class="container-fluid p-0 ">
  <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="a">
  </section>

  <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="b">
  </section>

  <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="c">
  </section>

  <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="d">
  </section>
</div>

Now, my goal is to ensure that the watermark remains centered, even when scrolling up or down the website. The code provided in the link only displays the watermark on the first section.

How can I achieve the watermark appearing in the middle at all times, regardless of scrolling?

htmlcssbootstrap-4

Answer №1

To implement a fixed positioning using CSS, you can utilize the code snippet below:

.watermark:after{
    position: fixed;
}

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

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

javascriptcssangularsass

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

htmlcss

The positioning of the <thead> element does not seem to be functioning properly

I attempted to create a background for the header (thead) using a pseudo element (:after) because I wanted the background to span from one edge to another edge (including both left and right side padding). However, thead is not taking a relative position a ...

htmlcsscss-position

Instead of displaying an error page, an Axios post request is returning data

I'm currently dealing with a post request that looks like this: axios({ method: "post", url: "/sessions/add", data: { session: { name: session.session.name, date: sessionDateInput.value, ...

htmlnode.jsexpressaxiosejs

Is there a way to modify the background hue of an upward facing triangle when a submenu is hovered over?

Access the Code on Fiddle #nav .submenu:before { content:""; position: absolute; width: 0; height: 0; border-bottom: 22px solid #b29600; border-left: 11px solid transparent; border-right: 11px solid transparent; margin: -12px ...

jquerycsshoverpseudo-element

The issue of the horizontal navigation bar not functioning properly persists when a specific width

I am currently working on building a horizontal navigation bar using CSS. What puzzles me is that when I specify a width for my ol tag, the horizontal float function does not seem to cooperate. However, if I remove the width property, everything works jus ...

htmlcsscss-float

Building an expandable vertical dropdown with Bootstrap that opens with a click

My goal is to design a vertical menu that expands when clicked, revealing 3 links for each item. I currently have the following setup: This is the initial layout: After clicking all items: The code I've implemented so far looks like this: <!DOC ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

The site is visually appealing in Firefox, but has a few issues on Chrome

I've encountered a common issue where my website displays perfectly in Firefox but looks terrible in Dreamweaver and Chrome. To fix it, I made live CSS edits in Firefox then copied them to Dreamweaver resulting in a mess. Here's how it should lo ...

htmlcssgoogle-chromefirefoxnavigation

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

javascripthtmlcss

Listen for the chosen choice

What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...

phphtml

Steps for accessing a particular item with *ngfor in Angular 2

I'm struggling to figure out why both elements of my array are displaying simultaneously in my browser instead of separately. Take a look at this screenshot to see what I mean: https://i.stack.imgur.com/0EKSn.png Is there a method to specifically ac ...

htmlarraysangularngfor

Tips on concealing the scrollbar only when a particular element is visible

I inserted the following code into my index.html file: <head> <style> body::-webkit-scrollbar { display: none; } </style> </head> This code successfully hides the scrollbar. My goal is to only h ...

cssangular

The browser prevented the script located at “http://127.0.0.1:5500/assets/platform.png” from loading due to an invalid MIME type of “image/png”

Sorry if this question seems repetitive, but despite extensive searching, I haven't been able to find a solution to my specific problem. I am currently working on developing a basic JavaScript game, but I'm facing challenges when it comes to impo ...

javascripthtmlcanvasmimeliveserver

Customize the overlay color using the theme's background color

I want to create an overlay on my webpage that covers all the content. However, I'm facing a challenge because my website allows users to customize the theme colors, and the overlay div does not adopt these color changes automatically. To rectify this ...

htmlcss

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

Ensure that the child div remains at the bottom of the parent div

I'm trying to make sure that the subfooter div stays at the bottom of the childbox div like a footer. You can see the code on this jsfiddle link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title ...

htmlcss

`Trying to conceal the tr elements on button click proves tricky with jquery`

I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...

jqueryhtmlcss

Utilizing hyperlinks within NicEdit content and managing events with jQuery

I am using nicEdit, a rich editor, on my website to insert hyperlinks into the content. While I can successfully add hyperlinks using the setContent() method after initializing nicEdit, I am facing issues with handling click events for hyperlinks that have ...

javascripthtmljquery-uihyperlinknicedit

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

Save data in MySQL and present a flexible number of rows in an HTML table

Let me illustrate the issue at hand with a hypothetical scenario involving numbers, although this may not be based on real data: In my system, up to 2 teachers grade a student on their performance of tasks. Let's say the student has to complete 10 ta ...

phphtmlmysql