I'm trying to print from my website to PDF. I have a background image and want a 1 in margin. When printing, the background only gets added to the first page and the top margin only applies to the first page and the bottom margin only applies to the last page.
I need to print pages that can then be placed in a booklet.
Using just a color instead of an image does place the color on every page, though stops when the text ends without covering the bottom of the page.
I have tried various background-size and #page styles
<head>
<style>
body {
background-image: url("../includes/images/paperback.jpg");
margin: 1in;
background-repeat: repeat-y;
}
</style>
</head>
<body>
test<br><br> <!-- repeated to fill multiple pages -->
</body>
I just received my answer elsewhere. I had been trying to use Chrome for this, but was directed to work in Firefox. By adding the same background to every div, setting the div margin to 0, and letting Firefox add a 1in margin, I was able to get a file that I can then add a background to in Acrobat that then fills in the empty margins. It works, though I welcome a simpler answer.
Related
I have this simple code:
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#000000">
</body>
</html>
Questions
Why I am getting html height 8px in Chrome and Firefox? HTML height should be auto (0px).
The body height is 0px, so why is the background color (black) filling the whole screen?
Before I answer your questions let me tell you that even browsers have their default CSS style which is applied to every webpage! (To give you more insight let's say these default styles are the reason why normal HTML Buttons appear differently in Chrome, Firefox and IE)
Now for your first question: As per browser's default CSS HTML has padding of 4px! That's why you are getting HTML height 8px.
Now you must be wondering how to get rid of them? So for that we can use Normalize CSS
Now for your second question: you can say BODY is the special case tag which has a exceptional way of rendering it's background! (Or say it's not like a normal DIV tag)
In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.
You can read more about it here
Hope you found your answers.
You have a line break:
<body bgcolor="#000000">
^---- here
</body>
which gets rendered as a space character, causing you to have an implicit single line of text in your page.
If you look at the page using Chrome devtools, you'll see that the 8px height is coming from the user-agent stylesheet; that is, browsers apply their own default styles.
One common technique to wipe this away and start from a 'clean slate' is to use one of the many css reset libs.
See here for some options.
You are getting margin as 8px, not the height. Each browser has some default settings that's why you are seeing that. Check out the default settings for each browser using the below links:
Firefox
Webkit
IE
in my Drupal site, some black, empty space is being displayed at the bottom of the page, like in the image below..
By googling, I understood, it is because not enough minimum content in the page. but did not get proper solution to fix it, except min-width setting in global (style.css) file, but it is displaying unnecessary scroll bars even a page has one row of data when you set that property.
Could any body suggest me a solution to this problem
Surely just add the right background colour to your body tag in your css?
in your style.css add
body {
background: #f4f5e5;
}
I have seen a website using google chrome that they put the CSS Background Property in the HTML tag like this:
html { background: #eee url('../img/bg.jpg') center center repeat fixed; }
Is it ok to do that or should i put it in the body?
It doesn't really matter on which you put the background, both work equally good, but there is a gotcha.
If you put the background on BODY only, the background will stretch the whole height of the screen, even if there's no content on the page, but if you put it on both HTML and BODY, the background on BODY will only be as high as your content inside it, just like on any DIV.
I often use backgrounds on both when there's a need for two background images as this eliminates the need for unnecessary DIV wrappers.
lea.verou.me puts it on the html tag. If it's good enough for her, then it's good enough for you. ;)
You might want to throw height: 100%; in there too.
I would suggest putting a page wide background image on the body tag.
<body>
And in your style sheet you can then specify a background
body
{
background-image:url('blah.jpg');
}
SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.
I am wondering if anyone knows how to achieve the following - take a look at http://www.dspts.si
The first 1/3rd of the screen has an empty background and from there onwards there should be a pattern repeating. I did it right now, by creating a very long pattern png and set it to offset 300 and repeat-x. However, I'm not happy with this solution because it will break if the pages ever get longer than the background image png is.
Thanks for any suggestions!
Put the repeating pattern as background to html element, then a white 1px * 300px image as an background image to body element, and you're all set.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
You don't have to use html and body tags for this, but it's the easiest way and doesn't require any new markup.
You can specify multiple backgrounds. See Can I have multiple background images using CSS?. The techniques mentioned there are:
Put the whole page into another <div> container or misuse the <html> tag for it.
This means you specify a background for <body> and one for <html>.
Use CSS3 which support multiple background images. That's not yet supported by all common browsers.
Yes, specify your background image as normal but set the background-position like this:
background-position:0 300px;
This will make the background image start at 0px from the left, and 300px from the top.
Let's not forget that you can use FireBug with FireFox to easily diagnose techniques on websites.