How to position an image on top of each printed page using HTML/CSS (SCSS)

I've created a simple and small webpage that looks like this:

https://i.sstatic.net/R7Ajz.png

Everything is perfect in the browser, with all the styles (margin, padding, etc.) just as I want it.

However, my issue lies in the print view of the page.

As shown in the image above, there is a "seperator" image. The first content can vary in size, sometimes smaller, sometimes larger with text, etc.

When the first content is too large, I want the separator image to appear at the top of the second page.

Is there a way to achieve this? (I believe JavaScript is necessary for this, without using jQuery).

Here's an image depicting what I'm aiming for in the print view:

https://i.sstatic.net/S2Efa.png

I hope this explanation makes sense, and thank you in advance!

javascripthtmlcsssass

Answer №1

Cascading Style Sheets (CSS) provides a property called page-break-before that can be used to insert a page break before a specific element.

By using it in conjunction with the @media print rule, you have the ability to target and apply a page break before the second image on printed pages:

@media only print {
  img:nth-child(2) {
    page-break-before: always;
  }
}

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

Show occurrences of an array categorized by date using JSON format

I'm interested in analyzing a JSON array to find the occurrences of a specific item by date. Let me demonstrate with the following JSON example: "data": [ { "tags": [ "foo", "bar", "hello", "world", " ...

javascriptarraysjsondate

Error message: "The contract is not defined in thirdweb-dev/react

I am currently using thirdweb-dev/react library to interact with a smart contract. However, I am encountering an issue where the contract is showing up as undefined in my code along with the following error message: query.ts:444 Error: Could not ...

javascriptreactjssmartcontractsweb3js

React error: File undefined (cannot be exported)

Encountering an issue while attempting to follow a tutorial: src/components/MyApp.js Line 17:18: 'myApp' is not defined no-undef Search for the keywords to learn more about each error. This is what my myApp.js file contains: import React fr ...

javascriptreactjs

Creating images or PDFs from HTML with CSS filters: a guide

Looking for someone who has experience creating images or PDFs from HTML code. The HTML contains images with CSS filters such as sepia and grayscale. If you have worked on this type of project before, I would love to hear about your experience. <img cl ...

javascriptphpcsspdf-generation

How do I disable scrolling while the animation is running in CSS?

Is there a way to disable scrolling while animating in CSS without using overflow:hidden on the body tag? ...

htmlcss

Google Chrome is unable to process Jquery JSON .each() function

My website has a simple chat application that is functioning well. It uses ajax to request data in this manner: $.ajax({ url: "fetch/"+CHAT_SESSION_ID+"/"+LAST_MESSAGE_ID, dataType: "json", cache: false, success: function(data) { if (data.session_ac ...

javascriptjqueryajaxjsongoogle-chrome

Scrape dynamic web data with JSOUP

Having trouble grabbing the price? I cannot seem to get any output for the price and its weight. I've attempted different methods, but nothing is working Document doc = Jsoup.connect("https://www.jakmall.com/tokocamzone/mi-travel-charger-20a-output- ...

javahtmljsoup

What is causing the return statement to not function properly in the Mongoose findOne method?

I am attempting to locate an item by its name, then update the table and return the updated result. However, the return statement is not working as expected in my code: class addSongsToArtist { constructor(artistName) { Artist.findOne({ ...

javascriptnode.jsmongoose

Triggering a JavaScript function upon the alteration of a Dojo auto-complete widget's value

I'm encountering an issue with calling a javascript function when the value of a Dojo auto completer changes. Despite trying to call the function through the "onChange" attribute, it doesn't work as expected. Within the javascript function, my ...

javascriptautocompletedojostruts2

Tips on dividing the information in AngularJS

Sample JS code: $scope.data={"0.19", "C:0.13", "C:0.196|D:0.23"} .filter('formatData', function () { return function (input) { if (input.indexOf(":") != -1) { var output = input .split ...

javascriptangularjs

What could be the reason for the checkbox not being selected in a React component

I'm currently working on integrating an autocomplete feature with checkboxes. Learn more here https://i.stack.imgur.com/YtxSS.png However, when trying to use the same component in final-form, I'm facing issues with checking my options. Why is t ...

javascriptreactjsmaterial-uireact-final-formfinal-form

Executing the Javascript function specified above upon the page being loaded

I'm fairly new to JavaScript, so please bear with me. I've got a JavaScript function on my page: <script type="text/javascript"> Sys.debug = true; var popup; Sys.require(Sys.components.popup, function () { popup = Sys.c ...

javascripthtmlasp.net

Gulp- Ensuring the latest versions of your javascript files

I have implemented bundling and minification for my JavaScript files using gulp. What I am aiming to achieve is that whenever I make a change in any of my files and run gulp, a new bundled and minified file with a version number is generated. For example: ...

javascriptjquerynode.jsnpmgulp

Protecting a Web Function

Suppose I have a C# MVC method to send emails using AJAX, like this: public class EmailController : Controller { SmtpClient mailserver = new SmtpClient("smtp.foo.com"); public string sendEmail(string from, string to, string subject = "", ...

c#javascriptajaxasp.net-mvcsecurity

What causes a decrease in speed when a function is called without specifying its owner?

Let's consider the following scenario: var abs = Math.abs; Wouldn't abs(-10) be quicker than Math.abs(-10)? Since abs is called directly. This caught my attention: Math.abs vs custom abs function Update: The same test conducted in Internet ...

javascriptoptimizationjsperf

Steps for displaying search results based on state when a button is clicked

My current challenge involves creating a component that displays a list of results upon clicking the "Find" button. However, I am encountering issues with the results state variable not resetting when I utilize setResults([]). In addition, only the most r ...

javascriptreactjsreact-hooksstatejsx

Is there a simple way to display all the data from a JSON object even if the contents are unknown beforehand?

Greetings! I am Pearson's dictionary api. Here is a glimpse of what I receive from an api call: { "status": 200, "offset": 0, "limit": 10, "count": 10, "total": 135, "url": "/v2/dictionaries/entries?headword=dog", "results": [ { ...

javascriptjson

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

javascriptcssangularjsresponsive-designangular-material

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

Angular list with a repeating group of radio buttons

I have a set of 'options', which consists of the following: {Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"} Additionally, I have a list of 'products' structured as follows: {Id: 1, Name: "Name 1", Recommend: options[0]}, {Id: ...

javascriptangularjshtmlangularjs-ng-repeat