Cannot set background image on my mPDF document. It is always blank/white.
mpdf Version: dev-master#dev
$mpdf = new \Mpdf\Mpdf([
'mode' => 'utf-8',
'format' => [210, 100],
'orientation' => 'P',
]);
$stylesheet = file_get_contents(__DIR__.'/certificate.css');
$mpdf->WriteHTML('<div class="content">Hello</div>');
$mpdf->Output();
certificate.css
#page {
background-image: url("certificate-background.jpg");
}
.content {
position: absolute;
left: 50%;
top: 50%;
}
Please help.
EDIT
I worked around it with :
'watermarkImgBehind' => true
in $mpdf configuration and:
$mpdf->SetWatermarkImage(__DIR__.'/certificate-background.jpg',1);
$mpdf->showWatermarkImage = true;
If you have the full mPDF package you'll find an example in php file named
example60_new_mPDF_v5-7_features.php
it contains a custom class
.divclip {
border: 10px dashed #000000;
border-radius: 3em;
padding: 20px;
background:yellow;
background-image: -moz-linear-gradient(top right 210deg, red, orange, yellow, green, blue, indigo, violet);
width: 300px;
height: 50px;
margin-bottom: 1em;
background-repeat: no-repeat ;
background-size: 100% 100%;
}
.divpic {
background:yellow;
background: yellow url("bayeux1.jpg") no-repeat scroll left top;
background-size: 100% 100%;
}
Use this class for the table or div you want to set its background and it'll work, it worked for me.
e.g;
<table width="100%" align="center" border="0" class="divclip divpic">
<tr>
<td width="2%"></td>
</tr>
</table>
only need the follow code
$mpdf->SetWatermarkImage('img/marca_agua_ffyl.png', 1.0);
$mpdf->showWatermarkImage = true;
Related
The first page of my pdf is a cover page, and has a different background than the other pages. 2nd page as following. When I do this, however, the bottom of the page is missing, even if I resize the image. Oddly, I've found that using the img tag works fine.
#page {
size: 21cm 29.7cm;
margin:0;
}
#poppen1{
background: url(mainimages/ersteseite.png);
background-repeat:no-repeat;
background-size:contain;
page-break-after: always;
color:red;
}
#poppen2{
color:black;
background: url(mainimages/zweiteseite.png);
background-repeat:no-repeat;
padding:2cm;
margins:0;
}
div.footer { position: fixed; bottom: 6mm;left:0.9cm;
width:19.2cm;height:6mm;border-top:1px solid black; }`
require_once("./dompdf/dompdf_config.inc.php");
$html="<!DOCTYPE html><html><head><title></title>";
include("./maincss/xyzcss.php");
$html=$html.$css_print.'</head><body>
<div id="poppen1">
text';
$html.='</div><div style="page-break-before: always;"></div><div
id="enter code herepoppen2">
more text</div>';
$html.='</body></html>';
$dompdf=new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
#$dompdf->stream($docname);
New try:
#page {
size: A4;
margin-top:2cm;
margin-bottom:2cm;
margin-left:2cm;
margin-right:2cm;
padding: 0;
}
body {
font-family: helvetica !important;
font-size: 10pt;
}
#overlay {
position: fixed;
top: -2cm;
left: -2cm;
height: 100%;
width: 100%;
background-image: url("mainimages/ersteseite.png");
background-position: center top;
background-repeat: no-repeat;
}
Background is being cut at bottom and top left, even tried height 90% and height 21cm, and div and p . No solution....
I have found an image that I want to colour. Can I change the colour of the image without having to edit it in an application such as Photoshop. For example.
background-image: url('texture.png');
background-color: blue;
And then use this for multiple sections but changing the colour each time?
Just wondering if this is possible and if somebody can tell me how to do it.
A couple of options (or three).
Background Image with Overlay gradient
div {
height: 100px;
margin: 1em auto;
color: white;
}
.bg-gradient {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-size: 100% auto;
}
<div class="bg-gradient"></div>
Pseudo-element with bg image and CSS filters
MDN Reference
div {
height: 100px;
margin: 10px auto;
color:white;
}
.pseudo {
position: relative;
background: #000;
}
.pseudo:before {
content: '';
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
background:url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-size: 100% auto;
}
.pseudo.blue {
-webkit-filter:sepia(1) hue-rotate(90deg);
filter:sepia(1) hue-rotate(90deg);
}
.pseudo.purple {
-webkit-filter:sepia(1) hue-rotate(270deg);
filter:sepia(1) hue-rotate(270deg);
}
<div class="pseudo blue">Text</div>
<div class="pseudo purple">Text</div>
Background Blend Mode
MDN Reference
div {
height: 100px;
margin: 1em auto;
color: white;
}
.blend {
background-image: url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
background-color: #663399;
background-blend-mode: multiply;
background-size: 100% auto;
}
<div class="blend"></div>
I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.
I think using a background gradient with a hard transition is a very clean solution:
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
Here are the examples in action: http://jsbin.com/iqemot/1/edit
You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
For this sort of thing you could use pseudo selectors such as :before or :after in your CSS to minimize on unnecessary HTML markup.
HTML:
<div id="container"></div>
CSS:
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
JSFiddle
I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.
A class is then added to the box which changes the :before pseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.
JSFiddle
Resources:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Using jQuery how to get click coordinates on the target element
This method words on different sized windows and fills the screen. Even works on mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal</title>
<style>
*{
margin: 0;
padding: 0;
}
.diagonalimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
}
</style>
</head>
<body>
<div class="diagonalimg">
</div>
</body>
</html>
This is a full responsive solution. Note the 50.3% on the second stop point, this avoids the pixelating of the line as mentioned in the above comment by #timlg07
.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>
Method 1:
<div class="triangle"></div>
body {
margin: 0;
}
.triangle {
background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
height: 100vh;
}
https://codepen.io/x-x00102/pen/ZEyEJyM
Method 2:
<div class="triangle"></div>
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
}
.triangle::after {
content: '';
position: absolute;
border-top: 100vh solid LightGray;
border-right: 100vw solid Salmon;
}
https://codepen.io/x-x00102/pen/VwWwWGR
Here's a solution to add a diagonal line triangle to the end of a section, it requires one of the two sections to have a flat colour BG, but allows for the other to be a gradient or image.
The demo below shows it with the main section having a gradient, and the section below being a solid colour (in this instance, white).
/* Cruft for the demo */
body {
margin: 0;
padding: 0;
}
.gray-block {
background-image: linear-gradient(to bottom right, #000, #ccc);
color: #fff;
}
.gray-block__inner {
padding: 20px;
}
/* The actual solution */
.diagonal-end::after {
content: "";
display: block;
margin-top: -6vw; /* optionally move the diagonal line up half of its height */
border-top: 12vw solid transparent; /* change 12vw to desired angle */
border-bottom: 0px solid transparent;
border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
<div class="gray-block__inner">
<span>Some content</span>
</div>
</div>
I'm working on a right to left aligned website (in Hebrew) and would like the icons to appear to the right of the text. For example: http://kaptinlin.com/themes/striking/shortcodes/typography/ at the bottom Contact Us widget, the icon is on the left, I want it on the right.
Here is the relevant code (HTML):
<section id="contact_info-3" class="widget widget_contact_info">
<h3 class="widgettitle">Contact Us</h3>
<p><span class="icon_text icon_phone default">(+40) 111 222 333</span></p>
<p class="contact_address">
<span>city, state</span>
<span class="contact_zip">1111</span>
</p>
</div>
</section>
CSS:
.icon_text {
padding: 0 22px 0 0;
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
#footer .icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/footer_icons.png");
}
.icon_globe {
background-position: -390px 0px;
}
.icon_home {
background-position: -360px -30px;
}
.icon_email {
background-position: -330px -60px;
}
.icon_user {
background-position: -300px -90px;
}
.icon_multiuser {
background-position: -270px -120px;
}
.icon_id {
background-position: -240px -150px;
}
.icon_addressbook {
background-position: -210px -180px;
}
.icon_phone {
background-position: -180px -210px;
}
.icon_link {
background-position: -150px -240px;
}
.icon_chain {
background-position: -120px -270px;
}
.icon_calendar {
background-position: -90px -300px;
}
.icon_tag {
background-position: -60px -330px;
}
.icon_download {
background-position: -30px -360px;
}
.icon_cellphone {
background-position: 1px -390px;
}
.icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wpcontent/themes/striking/images/icons_black.png");
}
.icon_text.black {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_black.png");
}
.icon_text.gray {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_gray.png");
}
.icon_text.red {
background-image: url("../images/icons_red.png");
}
.icon_text.orange {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_orange.png");
}
.icon_text.magenta {
background-image: url(http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_magenta.png);
}
.icon_text.yellow {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_yellow.png");
}
.icon_text.blue {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_blue.png");
}
.icon_text.pink {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_pink.png");
}
.icon_text.green {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_green.png");
}
.icon_text.rosy {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_rosy.png");
}
Thanks.
Your icons are background-images so in short you need to adjust the padding, background-position and text-align properties to move it from the left to the right side.
You need to make a few adjustments. First you need to make sure the padding is set to the right side instead of the left side. Then you need to adjust the background-position to put the icons on the right:
.icon_text {
padding: 0 22px 0 0; /* changed from 0 0 0 22px on live site*/
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
.contact_info_wrap .icon_text, .contact_info_wrap .contact_address {
padding-right: 26px; /* changed from padding-left on live site */
}
.icon_phone { /* obviously you would change each of the icons as necessary */
background-position: -72px -210px; /* changed from -180px -210px */
}
However doing this will lead to your icons not being in line with each other down the right side. So you will want to align the text to the right by adjust the p tags:
.contact_info_wrap p {
margin-bottom: 5px;
text-align: right; /* add this */
}
I would guess you would also want your titles to be aligned so:
#footer h3.widgettitle {
color: #FFFFFF;
font-size: 24px;
text-align: right; /* add this */
}
Should you need any further assistance on your rtl question, please visit the Striking support forum and we will assist you. RTL is generally straightforward. We can provide you the code for moving all body text to rtl, and assist with any particular element for which you are uncertain of the element movement.
I used to have an image that was placed as a background:
#myIco{
background:url(/i/myIco.gif) no-repeat center top;
}
So, when I placed that id into a table cell it'll place the icon in the middle of the cell.
I decided to combine all my icons into a single sprites image.
.sprites{
background-image:url(/i/mySprites.png);
background-color: transparent;
background-repeat:no-repeat;
border:0;
}
The value for the new icon is:
#axXh {
background-position: -33px -83px;
width: 33px;
height: 11px;
}
But now my icon is no longer in the center of the table cell. How do I fix it?
That's tricky. You'll have to encapsulate the icon within its own <span> or <div> and then horizontally position that in the center. I'm a big fan of sprites and stoked that you've decided to use them.
<style>
div { text-align: center; } /* or consider margin: 0 auto; */
.sprites {
background-image: url('/i/mySprites.png');
background-color: transparent;
background-repeat: no-repeat;
border:0;
}
.icon {
background-position: -33px -83px;
width: 33px;
height: 11px;
}
</style>
<div>
<span class="sprites icon"></span>
</div>