I'm struggling for hours now why the #media print is not working, I search on Google even on this site and nothing helped, so that's why I post this question.
I'm testing it on Google chrome print preview (ctrl p) but i also printed to page and it stays blank.
I try'd to make a separate css file and also a embedded css style into the page.
Here is my code
Headers
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
HTML
<div id="bruikleenovereenkomst">
<div id="blo_header">
</div>
<div id="blo_side_top"></div>
<div id="blo_side_bottom"></div>
</div>
CSS normal styles
div#bruikleenovereenkomst {
width:595px;
height:842px;
background-color:#fff;
position:relative;
}
div#blo_header {
width:100%;
height:125px;
background-color:#FBE983;
z-index:9
}
div#blo_side_top {
width:57px;
height:420px;
background-color:#B6CAE5;
position:absolute;
right:0;
top:0;
z-index:99;
}
div#blo_side_bottom {
width:57px;
height:420px;
background-image:url(../images/leaflet.png);
background-repeat:no-repeat;
position:absolute;
right:0;
bottom:0;
z-index:99;
}
CSS print styles (print.css) note: the div#bruikleenovereenkomst is just a black block for testing.
#media print{
body {
margin:0;
}
h1#logo {
display:none;
}
ul#menu {
display:none;
}
div#bruikleenovereenkomst {
width:100%;
height:500px;
background-color:#000;
}
div#blo_header {
display:none;
}
div#blo_side_top {
display:none;
}
div#blo_side_bottom {
display:none;
}
}
All I get with printing is just a blank page.
If you are using #media print, you need to add !important in your styles, or the page will use the element's inline styles that have higher priority.
E.g.
<div class="myelement1" style="display:block;">My div has an inline style.</div>
In #media print, add !important and be a winner
#media print {
.myelement1, .myelement2 { display: none !important; }
}
First, I'd try adding a space after print. May not make a difference, but.....
#media print {
/*print css here*/
}
Next, printing in browsers usually ignores background colors. Try using 'box-shadow'....
#media print {
#bruikleenovereenkomst {
width: 100%;
height: 500px;
box-shadow: inset 0 0 0 1000px #000;
}
}
Smashing Magazine has some excellent pointers: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/
Note that they talk about printing from a Webkit browser (Chrome or Safari, for example), and attempting to force the printer to render the colors as they appear on-screen by using a separate media query.....
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Hope this helps!
window.print() is an async function, and therefor if you are managing the DOM right after calling it - you may run into such blank print issues. The solution is to move the DOM management to event callback functions for the beforeprint and afterprint events:
onbeforeprint
onafterpring
Note: register both these callbacks before calling the window.print function
Safari browser does not support these two events.
you need to add print media style inside the div element which you print
Related
I have requirement to print html page in A4 dimension, plus I want to print content body print along with css, html and ignore menu list, header, footer and page right-side menu list.
To start with this, I have introduce simple div and class noprint and add this in #media print but its seems not working. noprint class works outside the #media print so I know its correct.
Also my requirement is to print directly from browser using standard Ctrl+P keyboard option
<style type="text/css">
.standardStyle {
display:block;
width:200px;
height:150px;
padding:10px;
background-color:green;
margin:5px;
}
#media print{
.noprint{ color:red;}
}
</style>
</head>
<body>
<div class="noprint standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
<div class="print standardStyle">
this is test line....
</div>
Run the snippet and hit Ctrl+P , you will see the line in red colour.
Screenshot :
#media print {
.noprint { color:red; }
}
<div class="noprint">
this is test line.....
</div>
Most browsers do NOT print background colors and background images by default. I suppose you are missing the green background - this is the reason for it.
Usually this can be acitvated in the browser's print dialog, but to force a background to be printed you can only try adding !important to the settings that don't appear properly in print.
#media print
{
.noprint{
display: none !important;
}
}
I have used a container in my HTML page, where i used a background image.
I want to put some text on top of my background image, and print it.
But When I use :
Print
I dont get my background image at all.
this is my code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div id="headerbg">
<h1><p>DATA</h1>
</div>
<div id="container">
<p id="address">
adress is XYZ
</p>
<p id="ward">
Ward is 7
</p>
</div>
Print
<div id="footer">
</div>
</body>
</html>
The css I used is:
#headerbg {
background:#E8E8E8;
text-align:center;
height: 80px;
}
#headerbg p{
margin: 0;
position: absolute;
top: 5%;
left: 40%;
margin-right: -50%;
}
#container
{ background-image: url("notice.jpg");
height:680px;
width:1000px;
background-repeat: no-repeat;
margin-top:10px;
margin-left:390px;
position:relative;
}
#address
{
z-index:100;
position:absolute;
color:black;
font-size:19px;
left:10px;
top:225px;
}
How can I make my background image printable? please help me!
Add media print:
<link rel="stylesheet" href="" media="print"/>
or, you can set in css, as in:
#media print {
body {
content:'url(../imagez.png)';
}
}
note: some IE not work by using that, you can use:
#import 'style.css' print;
If you are using Windows 7, when the print dialog appears, there is an option called More Settings below the option Color. Click on that and you will see a check box called Background Graphics. Tick that and you will see the background image.
Also, for Chrome and Safari you can add the following in your CSS:
#media print
{
* {-webkit-print-color-adjust:exact;}
}
This will print the background image even if the option is not selected in the print dialog. For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}
I am working on a set of HTML reports that need to be printed. Everything looks OK on the screen, but a white box surrounds all of the text elements when the page is printed.
Here is a screen shot of the page on screen:
Here is a screen shot of a PDF printed using the system print dialog:
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="../css/style.css" media="all"/>
</head>
<body>
<div id="container">
<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content">
Content goes here</div>
</body>
</html>
Here is the CSS:
#media print
{
/* Hides elements on page when printed */
.nonPrinting
{
display: none;
}
/* Forces the background colors / images to display when printing */
body
{
-webkit-print-color-adjust : exact;
}
}
#container
{
width:500px;
}
#menu
{
background-color:#FFD700;
height:200px;
width:100px;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:400px;
float:left;
}
The pages are running inside of a node-webkit application.
Have you tried assigning a specific background-color on these elements?
Try
background-color : transparent;
or
background-color: #FFD700;
on the child elements of #menu
EDIT
This is how the 'printed' pdf looks like for me:
EDIT:
Maybe it's a driver issue?
When I use css for printing into a pdf for ex. content of my webpage it print more than I need like the header, footer, like of my webpage ,labels, the date ... etc which I don't want to print?!
Here is an example:
<html>
<body>
<img src="Snapshot_20120326.jpg"/>
<h1>Mezoo</h1>
<h2>The big member</h2>
<button onclick="window.print();">print</button>
<style media="print">
h1 ,img {
display: block;
}
h2, button{
display: none;
}
</style>
</body>
</html>
It'd probably be best to set #media print styles in a separate CSS stylesheet ...
So for example, to hide the header:
#media print {
.header, .hide { visibility: hidden }
}
You can learn more about media styling here: http://www.w3.org/TR/css3-mediaqueries/
You can use the media tag on a link.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The print css could then turn off visibility on things you don't want to see.