Currently facing an issue while trying to print a web page form in IE that has a background-image. Despite attempting multiple tricks, the background-image is not showing in the print preview. If anyone has successfully resolved this problem before, your insights would be greatly appreciated.
If you're struggling with printing CSS background images, this solution may help. Keep in mind that it may not be foolproof, but it's worth a try.
Unfortunately, it's not always possible to print overlapping images in the UI, but here's a workaround:
$('#rootdiv').find('div').each(function(){
if( $(this).css("background-image") != "none"){
$(this).css("overflow" ,"hidden").css("position", "relative");
$(this).prepend('<img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "")+'">');
$(this).css("background",'..');
}
});
Keep in mind that if you want to print only half of an image on the page, you'll need to adjust the width of the div element (referred to as $(this) in the code) to be smaller than the actual width of the background image. This will display only a portion of the image.
Check out these two insightful posts from the stackoverflow community:
How to print a webpage with background images and colors?
Printing background images in Firefox or Internet Explorer
Both discussions touch upon the usage of list styles.
To enable background colors and images when printing in Internet Explorer, go to the Tools tab > Internet Options and click on the "Advanced" Tab. Scroll down to the "Printing" section and check the box next to "Print background colors and images".
While these instructions are specific to IE 8.0, they should be similar for older versions of the browser.
By default, this option is unchecked as not everyone wants to print fancy formatting, opting instead for just plain text. However, it is becoming increasingly common to include all elements when printing documents.
To access the background image, you can attempt to right-click on it and choose 'show background-image.'
However, if your intention is to capture the entire web page, one option is to 'print the screen' and then view the resulting bitmap in a program like Paint before printing it out.
Internet Explorer does not automatically print background images and colors, as it is a browser feature designed to save ink and improve the readability of printed materials.
If you want these elements to appear in your prints, you can advise users to adjust their browser settings or use real image elements instead of background-images combined with CSS for positioning text on top.
Consider creating a separate stylesheet specifically for printing that adjusts text color to ensure readability when background images are dark and text is light on screen.
After a quick search on the internet, I found the following as the top result:
I double-checked and confirmed that the option is still available in IE8.
The default setting does not include printing background colors and images, likely done to conserve ink.
It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...
I have limited knowledge of javascript, but I am attempting to implement the following code which is functioning properly. However, I am encountering an issue when I try to add a "..." or ":" at the end of the "Choose" option, causing the code to stop work ...
My design includes an image floated to the left with text aligned to the right of the image. Unfortunately, the text is too long, causing a line from a paragraph to drop below the image. How can I ensure that the text stays in line with the paragraph and ...
I attempted to retrieve only the Saturdays of upcoming months with: var momentDt = moment('2017-03-18').add(1); //or 2 or 3 However, adding 1 results in April 18, 2017, which is a Tuesday. Is there an easier way in moment to achieve this wit ...
I utilized JavaScript injection into WebBrowser control in C# (System.Windows.Controls.WebBrowser) to achieve, <C#> IHTMLDocument2 webdoc = (IHTMLDocument2)webBrowser1.Document; string var = File.ReadAllText("C:/.../Resources/script.txt"); object re ...
Hello there! I've run into an issue and could use some assistance, thank you in advance! Running MONGOOSE VERSION: "mongoose": "^7.0.3" Error Message: MongooseError: Model.findById() no longer accepts a callback at Function.findB ...
I'm trying to keep the menu on top, but when I hover over one menu, the others should not overlap. How can I achieve this? Thanks for any help! Before: https://i.sstatic.net/esBw6.png After: https://i.sstatic.net/slW1n.png Expected: https://i.s ...
Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...
Currently, I am in the process of creating a website with the temporary name yeet.io. I am facing an issue where I am attempting to center both an input and h1 element inside a div vertically and horizontally, but they keep appearing misaligned for some r ...
Is there a way to stay logged in as the same user on multiple devices? I have an Android app and a web app and would like to be able to be logged in on both simultaneously. However, when I try to do so, I am receiving an error message 209 stating "invali ...
I'm in the process of developing an interactive project that will be showcased on a touch screen. One of its key features is a fixed footer navigation. Currently, I am using floats to position the main navigation elements and within each element, ther ...
I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...
The code snippet provided creates the desired effect, but unfortunately, it only seems to function properly in Firefox and Edge. In Chrome, while the elements are stacked correctly, there is no horizontal scroll bar, making the rightmost items hidden and i ...
I want to configure React so that when clicked, it will run process.env.REACT_APP_LOGOUT and remove the item set in local storage. Currently, it requires two clicks to execute. The first click redirects to the index page, and then a second click is needed ...
After integrating the Material-UI dependency into my ReactJS code, I encountered an issue where the "save" functionality no longer works properly. Previously, when editing a task in my simple Todo list app, the new name would be saved successfully. However ...
I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...
Greetings, I have been working on validating whether a user has already participated in an event using AngularJS. Here is the relevant code snippet: HTML <form> <span style="display:none"> <input ng-model="userInfo.user_id"> ...
I have encountered a challenge while attempting to write a protractor test that selects an item from a custom dropdown menu. The issue arises when trying to click on an element other than the last one in the list, as it hangs and times out. Interestingly, ...
Currently, I am facing an issue with displaying data retrieved from a server using Angular 6, Rxjs, and Chartjs. When utilizing local mock data, everything works perfectly fine. However, when fetching data from the server, the charts render as blank becaus ...
After recently downloading a text rotator plugin, I've run into a small issue. Whenever the text changes, the entire heading shifts because it's centered. Here's a simple example: (Don't worry about the js code, it's just a ba ...