is there a possibility to repeat elements on every page without using the header- or footerelements on mPDF?
I want a punch- and foldmark on every page but I have als on header and footer on every page.
Cheers
You could use a background image using the #page CSS property:
#page {
background: url(<?= __DIR__ ?>/images/background.png) no-repeat 0 0;
background-image-resize: 6;
}
That background will now display on all pages.
Alternatively, use absolute positioning in a header / footer to get the desired results. If you already have a header / footer, just absolute position those elements as well (a header / footer cannot currently contain both absolute and non-absolute positioned elements).
Related
I have a header create in asp but and i have a fixed css like that for header:
.fixed
{
position: fixed;
}
When start my app header intersect all cells like in picture:
What i wrong?
It's pretty unclear from your question/provided information as to what you are asking. Based on what I inferred, the problem is Why is the fixed header mixing up with the other elements on the screen?.
Reason
When you set position: fixed that particular element is taken out of the normal document flow and the DOM behaves as if the element doesn't even exist. In that scenario, the elements below the fixed element would go up to occupy the now available space.
Fix
To fix this, add some padding-top to body. The value should be more than the height of your fixed element.
body {
padding-top: 100px; /* Assumed */
}
Also, if you want, add some background color or shadow to the fixed element for better clarity but that's your personal choice.
Here is my project (1000px x 1230px). I want this element taken from my project (this header picture originally has 1500px x 354px) to:
1. be inserted with background-image property
2. that background-image to be direct child of body tag and
3. so that height and width would scale proportionally along with scaling the browser window.
If it was possible to carry out the above operation the paramerers would be width:100% hight:19.19% but when I enter hight:19.19% the image does not show at all, QUESTION: WHY IS THAT SO? I inserted background-image into section tag and this is how it seems to somehow work (but I do not know why it works):
section.super {
position:relative;
padding-top:11.8%;
padding-bottom:11.8%;
background: url(header.jpg);
background-size:100% 100%;
margin: 3% auto 0;
}
If I insert a div or article inside the given section tag above and specify width and height with % for background-image inside this div or article, the height WOULD WORK. But as a direct child of body tag the height does not work, why is that?
I know that there is an alternative IMG TAG but it will not work in rensponsive layouts where in different page sizes I will want substitute different .jpg (for instance) files (with higher and lower size) in which case I would need to paste different images to the same element in mobile styles, in tablet styles and deskop styles.
Although I am not sure i completely understand your problem, have you tried to use:
background-size:cover;
instead of:
background-size:100% 100%;
?
on your file css you should put:
body {
background-image: url("http://s12.postimg.org/ymlx2m65n/header.jpg");
}
I've been trying to figure out how to remove the side spacing (on both left and right) of a page. For instance, I'll have a photo that should span the width of the page, but for some reason wordpress automatically adds in a buffer.
Thank you.
Add this css-
#wrapper div.centered-wrapper {
width: 95% !important; // reduce the % to increase the spacing.
}
This will effect only the content on the page not the menu. The menu wil take style from what you have changed in style.css.
I'm trying to align a graphic which overlaps the main page element and pad elements. How
to do this? I have a blue circle button (click here) that I want placed in the following picture location on the page.
css:
If you want to place an element above all other elements at a specific position, you should move it out of all the other elements so it is a direct child of <body>. If you place it directly before the closing </body> tag, then it should be the topmost element if you're not using the z-index css-property anywhere. If you do so, apply it to your blue circle as well.
Then to place it to a specific location, use the following CSS:
#blue_circle {
position: absolute;
top: [whatever you want]px;
left: [whatever you want]px;
}
of course you can also use relative positioning (% instead of px) to set the position of your element.
I'm designing a print stylesheet for a document which will run to a few pages. I want every page to have a company logo at the top, and top padding of 5 centimeters, so I did this:
body {
background:url(logo.png) no-repeat center top;
padding-top:5cm;
}
The logo appears on each page as requested, perfectly. But the top padding only appears on the FIRST page, and every subsequent page has padding-top of zero.
Am I doing something wrong? How can I get the top padding on EVERY page?
This may be because padding is counted relative to body tag. Use padding-top style with immediate wrapper element after body tag.