i would to create a pdf file from html with mpdf library. i would to set a background image just to 2'nd page of rendered pdf(not all pages). i use the following code:
$mpdf=new mPDF('');
$html = '
<body>
<style>
#page {
background: url("../mpdf60/bg1.jpg") 50% 0 no-repeat;
}
</style>
<div style="margin-bottom:50px"> </div>
<div align="center" style=" margin-bottom:350px"><img src="../mpdf60/pdffirst1.jpg" height="100" width="190" alt=""></div>
<pagebreak />
<div>
</div>
</body>';
in this code the background image set on all pages of rendered pdf(with #page selector).
how can i set the background image just for one page(2'nd page)? thanks...
According to the documentation, mPDF supports named #page selectors, so you could do this:
<style>
#page second {
background: url("../mpdf60/bg1.jpg") 50% 0 no-repeat;
}
</style>
and then:
div.second {
page: second;
}
and then your second page should be within a div with a second class. Look at the example given at the link with Chapter.
Related
Is there a way of using a php variable to manipulate css?
I'd like to add an image chosen by a user in a wordpress post (featured image) to the background of a specific div. I know how to mix php and html but, is there a way of doing the same with css?
I'm getting the image with:
$img = get_the_post_thumbnail_url($post_id, 'mySize');
Well, you already know how to mix PHP and HTML, right? Then you just do the same, but creating a <style> element in <head>. You put your CSS in this element. Something like this:
<head>
<style>
div#myDivId { background-image: url("<%= $img %>"); }
</style>
</head>
What you could do is something like this:
<head>
<style>
.user img { background-position: center center; background-repeat: no-repeat; background-size: cover; }
</style>
</head>
...
<div class="user">
<img src="images/trans.png" width="50" height="50" style="background-image:url(<?php echo $img; ?>);" />
</div>
Where trans.png is a small transparent png image.
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I want to get background-image URL that is in internal css. I'm using xpath in php
Here is the html structure
<div id="plugin-title" class="with-banner">
<div class="vignette"></div>
<style type="text/css">
#plugin-title { width:772px; height:250px; background-size:772px 250px; background-image: url(//ps.w.org/jetpack/assets/banner-772x250.png?rev=1279667); }
</style>
<h2 itemprop="name">Jetpack by WordPress.com</h2>
</div>
If you want the links for background-image, then you can use this RegExp.
background-image.*?url\((.*?)\)
Example implementation:
$html = <<<EOT
<div id="plugin-title" class="with-banner">
<div class="vignette"></div>
<style type="text/css">
#plugin-title { width:772px; height:250px; background-size:772px 250px; background-image: url(//ps.w.org/jetpack/assets/banner-772x250.png?rev=1279667); }
</style>
<h2 itemprop="name">Jetpack by WordPress.com</h2>
</div>
EOT;
preg_match_all('/background-image.*?url\((.*?)\)/mi', $html, $matches);
$matches contains all the background-image urls.
i would to create a pdf file from html with mpdf library. i would to set a background image just to 2'nd page of rendered pdf(not all pages). i use the following code:
$html = '
<body>
<style>
body, div, p {
font-family: \'Tahoma\';
font-size: 11pt;
}
#page second {
background: url("../mpdf60/bg1.jpg") 40% 0 no-repeat;
}
div.second {
page: second;
}
</style>
<div style="margin-bottom:50px"> </div>
<div align="center" style=" margin-bottom:350px"><img src="../mpdf60/pdffirst1.jpg" height="100" width="190" alt=""></div>
<div align="center"><img src="../mpdf60/pdffirst2.jpg" alt=""/></div>
<pagebreak />
<div class="second">
page2
</div>
<pagebreak />
<div>
page3
</div>
</body>
';
but the background image set for all pages that been after second page. i want to set background image just for second page, not ather pages. how can i do this? thanks...
Give some id to the second page div. Like "secondPageDiv".
and then change in css.
#secondPageDiv {
background: url("../mpdf60/bg1.jpg") 40% 0 no-repeat;
}