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)
Related
i am trying to build a simple landing page for my website on bigcartel.
i am trying to get it so that a fullscreen image takes up the whole page and directs to the product page after being clicked
after tons of research this is what i have come up with
<head>
<a href="/products">
<img title="click to enter" src="http://i.imgur.com/QC0IqJ9.gif"
style="width: 100%"; style="height: 100vh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<
body {
background: src="http://i.imgur.com/QC0IqJ9.gif" ;
background-size: 100% 100%;
}
-->
<a {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}>
</style>
</a>
{{ head_content }}
</head>
my problem is that i cannot get the image to stretch and fit depending on the browser resolution
You have some really strange tags within your <style>, but I'm assuming they're part of Scrapy-Splash. The problem is specifically with your line background: src="http://i.imgur.com/QC0IqJ9.gif";. You're setting CSS, so you don't set the src, you set a url() as such:
body {
background: url("http://i.imgur.com/QC0IqJ9.gif");
background-size: 100% 100%;
}
<body>
</body>
Hope this helps! :)
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
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?
Hello expert i am trying to build a welcome page like facebook. I want a header with different color with fixed width with browser just like facebook welcome page. I have created a div id with 100 width. But the width is not fitting with the browser. it showing in the body. Please tell me how to do this. I am absolutely new in all of this.
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="welcome.css"/>
<title>Welcome To The Thinkers</title>
</head>
<body>
<div class="header"><h1>Welcome To Thinkers</h1></div>
</body>
</html>
CSS
body{
background-color:yellow;
width:100%;
}
p{
font-size:23px;
color:#930
}
.header{width:100%;
height:72px;
background-color:green;
}
If I understand you correctly I think your problem is with default margin/padding on certain elements.
If you add
body, h1
{
margin:0;
padding:0;
}
It should sort that out.
Demo
Try this code:
//these code is for fixed header
.header{
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #0683c9;
}
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>