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");
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.
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
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.
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.