For some reason, the background image doesn't show in dompdf no matter what I try. I've put the direct url as well. None of them worked. Can someone with dompdf experience tell me what I need to do?
It's important to note that other images appear just fine. It's only the bakground images that are causing issues. Here is one of the background images:
body{
font-size:15px;
background:url(bg.jpg) repeat-x bottom left;
}
Using DOMODF 0.5.1? It's probably having trouble parsing the background shorthand. You could try breaking up the generic background property into the specific properties:
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-position: bottom left;
I also found that sometimes I had to supply a full URL (http://example.com/bg.jpg).
The handling of this property is a little buggy in that version of DOMPDF. You might consider upgrading to the 0.6.0 code base (currently at beta 1). It has a number of improvements over the previous release.
Well, I had the same issue, in my local XAMMP (windows) it worked as it should, but when moving to a live server background images didn't show up.
After looking for a solution without success, finally solved it.
This wasn't working:
body{ font-size:15px; background-image:url(<?php echo getcwd(); ?>/bg.jpg); background-repeat:repeat;}
This worked like a charm:
body{ font-size:15px; background-image:url(./bg.jpg); background-repeat:repeat; }
I hope this can help.
It looks like DOMPDF supports background images, so I have to assume that the filepath is wrong.
If you add <img src="bg.jpg" alt="" /> does it work?
I've found in the last project I used DOMPDF I needed to point the image file to it on the filesystem (not a relative path to webroot), and I had to use a root path that ended up looking like this
<img src="<?php echo DOCROOT; ?>assets/images/bg.jpg" alt="" />
Where DOCROOT became /users/me/public_html/. To test it as plain HTML before I sent to DOMPDF, I did a str_replace() to change the DOCROOT to / (relative to my path).
for some odd reason I had the same problem
dompdf ver 0.6.1
in the img tags the full local path was needed
as a background image the relative path worked only,
but background-image set in the style tag didn't work
hope that helps
In your config file, set DOMPDF_ENABLE_REMOTE to true.
Then in your page or style sheet, use the full path (i.e., "http://yoursite.com/images/imagename.png") in the src tag or the url() in the style sheet.
Related
I'll try to explain the issue the best I can: I have two css uploads methods. The first one is with link rel and is working fine.
The second one (for performance issues), goes inside the css file and print directly the css into the page.
<!-- <link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" /> -->
<style>
<?php
$urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
$style = file_get_contents($urlstyle);
echo $style;
?>
</style>
There is absolutely no doubt about what is loaded. Those two methods returns the same css.
As an example we can use this part of the css
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
As you can see, there is an url inside.
When trying to load the css with the first method, the path is fine. Everything works fine.
But here comes the issues, when I try my second method writting this css inside the file where it's called. The url path of the css is wrong. (I shouldn't have the first ../ to make it works.
But here is the thing. Even if this code shouldn't be working with the second method. The file is loaded properly with no problem. And I can't understand why it's working. (And the cache is cleared ne doubt about that neither).
More stranger things, when I upload the website on server and i'm no longer in localhost, then there is indeed an issue and the file isn't found as it should be.
So working in localhost while it shouldn't. Not working in server while it should indeed not be working.
But I have something more stranger again, I got an other website. Same framework (that means same folder/file structure), same css file, same way of including the file. And with this one using the second method, the file is found in localhost and in server too...while it shouldn't be working with none of them.
I hope you have any idea cause I'm lost at this point. Thanks.
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
May be you have a folder containing picto has on another folder
I'm not sure I get 100% what your problem is, but it seems that you load your css with relative paths from two different starting points:
Loaded with link:
www.example.com/path/to/your/application/style/index.css
=> this loads the asset from:
www.example.com/path/to/your/application/assets/img/picto/arrow-down.svg
Included in site:
www.example.com/path/to/your/application/site.php
=> this loads the asset from:
www.example.com/path/to/your/assets/img/picto/arrow-down.svg
^^^
note the missing path due to "../" in your svg path
Maybe this is the answer to your problem, feel free to clarify if I didn't get you correctly! Please also check the developer console, especially the "Network" tab in Chrome and see what exactly is requested and double check the paths there.
I've developed a joomla template which has this code in its css file:
#slide-1{
background: url(../slide-1-bg.jpg) 0 0 no-repeat;
}
which is working as expected: I have the background image in my home page. Now I would like to change this based on the image choice made in the admin part of the template by reading a variable.
At top of my index.php file before html document information starts I have:
$slide6bgimg = $this->params->get('slide6bgimg', '');
and further to use it in the html doc definition inside the head tag as:
<style>
#slide-1{
background: url(<?php echo $slide6bgimg;?>) 0 0 no-repeat;
}
</style>
this in practice failed. I then tried to test it without php code with my relative path altered:
#slide-1{
background: url("slide-1-bg.jpg") 0 0 no-repeat;
}
which is also a fail. My index.php is in the same folder (template folder) where my image is, so that must not be a problem as long as I understand. Also, before the code of slide-1, I have color code for css reading out of my template admin (by php echo the variable) and it is working correctly. Only the background image is no way working. I tried every possible way I could think of and searched the google but no chance. There must be something I absolutely don't know!
Please help.
The image url should be relative to the location of the css file and not the index.php file.
A new client recently contacted me to do some updates to her wordpress website, after her webhost updated her version of wordpress due to security issues. The update disrupted some code on the login page of the site so that it displayed incorrectly. I went in and removed the referenced images for the login logo and background and then tried to find the source code. When I inspected the page with firebug I got the following:
#login {
background-image: url("http://www.descaid.com/wpcontent/themes/oceanic/images/login.png") >!important;
background-repeat: no-repeat;
min-height: 500px !important;
padding-right: 7px;
width: 600px !important;
}
This chunk of code needed to be removed as it was overriding other rules, so I, of course, looked to the right of this block of code to see what stylesheet was being referenced, or if it was something in the custom css plugin or whatever. Firebug indicated that this code was on line 25 of "wp-login.php #3". #3? What does that mean? I opened the wp-login.php file and couldn't find this code anywhere in it. It was not in the style.css file for the theme, either. I did several google searches and hunted and pecked around in the files for about 3 hours to no avail and I'm now pretty exasperated. Any help would be greatly appreciated. The page in question is: http://descaid.com/wp-login.php
It seems like this can't be some duplicate/triplicate php file, but that the code is being referenced through the php file from somewhere, I just can't figure out where.
Wordpress minifies all the CSS-files automatically. These files are located in the directory wp-content/themes/[theme]/. The easies solution would be to just open all of the CSS-files and look for the reference.
These vary from template to template, but beginning with style.css could be smart.
It means the relevant css is located in the source code in <style>..</style> tags and not inside this file as you think.
It is likely being generated by one of your WordPress plug-ins. You could disable all your plug-ins and see if that bit of CSS disappears. If so, turn each plug-in back on one at a time until it comes back. That will at least narrow your search to files in that plug-ins folder.
It's my first time asking here (I have visited the site several times, but never asked). Well, let's go to the question:
It happens that I'm developing a live image resizer (I know it already exists, but I'm doing my own for my own projects). It has three parameters: the image path (obviously), the size I want to resize and the extra margin I want to add. The idea is to resize the image inside a box with square dimentions. The problem is, the size I want to resize depends on the size of the outer box. For example, I have this HTML code:
<div class="image_outer_box">
<img width="300px" height="199px" style=" margin: 65.5px 15px;" src="img.jpg">
</div>
The properties of "image_outer_box" are the following:
.image_outer_box
{
height: 330px;
width: 330px;
border:solid 1px #737373;
}
The function I call is this:
liveResize($img, $size, $extramargin);
The problem here is when I send the $size, since I must be aware of the CSS properties of "image_outer_box" in order to make the right resize. And, as you can see, it's not only a matter of the size specified in "image_outer_box" but the margin I want to add. Actually, I wanted to add 15px of extra margin for the image and resize the image inside 300x300.
It's not critical to have a way to get the CSS attributes from this particular class, but it would help if I (and other developers) can apply the function without being aware of the CSS attributes of the container where the image will be placed.
If there's a way to make it, I would be great.
Thanks! (for the other times I came here to search a solution and I found it!!!)
EDIT: I found a way that doesn't require to get the CSS properties, but still I would like to have info for this matter. Thanks for those who tried to help 'til now!
Do you want to actually store the resized image, or are you just trying to display it resized? If the latter is the case, the following solution might help:
HTML
<div class="image_outer_box" style="background:url('img.jpg') no-repeat; background-position:50% 50%; background-size:100%;">
</div>
CSS
.image_outer_box
{
margin:10px;
height: 330px;
width: 330px;
border:solid 1px #737373;
}
Of course, this doesn't allow you to manually set the width and height of the image, since that depends on our CSS entirely. Change the CSS, and the size of the image will automatically change as well. I like this method quite a bit, but it won't get very far if you want to store the image or if you want to be able to set the image size manually.
I think in order to be aware of the CSS and change according to the current client side state of the image you should (I mean I would recommend) use Javascript and maybe if you want to keep the function call it over AJAX.
can someone please tell me why the background image is not displaying in my php code.
#wrap-iframe{
background-image: url(bg_01.gif);
background-repeat: no-repeat;
border:0 none;
min-width:760px;
min-height: 700px;
}
this is the CSS i have. the div box is displayed flawlessly. the image url is correct. if i inlcude the image through the tag, it shows up.
i was not this bad at CSS...:-(
Note that the image path must be relative to the stylesheet. If your stylesheet is in a different directory than the page, you must adjust the path in url() accordingly.
You can right click the DIV in Firefox and click "show background image". It will take you to the URL where firefox is looking for the image, and you can see whether it's correct or not.
I recommend using an "absolute" path. Start with a forward slash and describe the path from the HTML root forwards, i.e. /images/bg_01.gif would resolve to http://yourdomain.com/images/bg_01.gif
I always put quotes round the filename too, though they may not be 100% necessary:
background-image: url("/images/bg_01.gif");