I am developing my first plugin in wordpress and using background-image in style tag:
<head>
<style>
.remove {
border: solid;
background-image: url(icon-remove.jpg);
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
display: block;
font-size: 14px;
height: 20px;
padding-top: 40px;
text-align: center !important;
}
</style>
</head>
My plugin path is:
..www/wpsample/wp-content/plugins/sample
The Image file is present in same directory (/sample)
but it showing me error in console as 404 and the path it is looking for is
http://localhost/wpsample/wp-admin/icon-remove.jpg
How do I specify correct path for image file ?
You need to use the wp_enqueue_style command to tell WP where the file is:
wp_enqueue_style('myStyle' //--- name
//--- location of css file relative to this file
, plugin_dir_url(__FILE__).'css/myCSS.css'
, array()
);
This is required because people can install WP and set the folders to different names. The wp_enqueue_style will handle this for you.
Alternatively, embed the CSS within the same file.
If you want to use background-image in wordpress plugin, You should use relative css path to the stylesheet. Example:
background-image: url("../wp-content/plugins/sample/icon-remove.jpg");
Or you can add full url in url():
background-image: url("http://localhost/wpsample/wp-content/plugins/sample/icon-remove.jpg");
For more information read this link: W3
After trying many solution finally this works for me
background-image: url("<?php echo plugins_url().'/sample/icon-remove.jpg'?>");
Related
I'm trying to add a custom logo to my wordpress login form. I've a child theme active and I've used the following code inside my functions.php file, anyway the code will be ignored and I will see always the default wordpress logo. Is there something wrong in the code or I need to put this into the functions file of the parent theme?
function add_custom_logo(){
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url('https://www.example.org/logo.png');
height: 65px;
width: 320px;
background-size: auto;
background-position: center center;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'add_custom_logo');
Most of the case, this cause by the priority issue - please change your action hook into this and try again:
add_action('login_enqueue_scripts', 'add_custom_logo', 99);
On my website, I want to cover a page (not the home page) completely with a picture. It should completely fill the screen on every device. I have specially created a childtheme to handle this problem.
On my website, I want to create a gallery facility that greets the visitor with a picture across the entire screen. I've created a childtheme for it as already mentioned. I first tried once in the functions.php folder to set the content width to 100%. Unfortunately, this did not work. Then I tried it with all over the custom css field on my wordpress theme. That too did not work.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
}
With this code, it should actually be funkitoinieren as I want. Unfortunately I can not integrate it into my data. He does not fit in functions.php and he does not work as a custom css either.
// set default content width
if ( ! isset( $content_width ) ) {
$content_width = 680;
}
This code in the functions.php folder was my second attempt. I could not set the width to 100% and on all other values she looked the same.
I expect that the picture under philippfalkenhagen.de/tiere-2`fills the entire screen. unfortunately it is not like that. When I used 100% of the second code, I could not even access my website until I reset the code.
Since you are dealing with a background and not a figure itself, try to use background-size: 100% 100% and background-repeat: no-repeat.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
background-size: cover;
will help you to solve this issue.
updated:
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-size: cover;
}
This is my functions.php folder:
https://we.tl /t-g7Mvc2EbC6
I suspect that I have to put the code here, but I do not know where.
I need help with adding an image, as the background, to a Bootstraps jumbotron in the Codeigniter Framework for PHP.
I currently can add an image to Codeigniter no problem with the following code:
<img src="<?php echo base_url('image/test.jpg'); ?>">
I can also use my CSS file to change the background of the jumbotron with the following code:
.jumbotron {
color: black;
text-align: center;
background-color: red;}
however, I am not sure how to get the css file to add my image to the background of the jumbotron. I have tried the following:
.jumbotron {
color: black;
text-align: center;
background-image: <?php echo base_url('image/test.jpg'); ?> }
.jumbotron {
color: black;
text-align: center;
background-image: url('image/test.jpg');}
.jumbotron {
color: black;
text-align: center;
background-image: 'image/test.jpg'}
Nothing that I try seems to work. I do have my images folder under the project and not in the application folder. I can get the images to display anywhere on my page-that is not the problem. But getting them as the background in the jumbotron does not work.
The easiest thing is to apply it in your view to the Jumbotron.
Try something like this in your view:
<div class="jumbotron" style="background-image: url('<?= base_url('image/test.jpg'); ?>')">
...
</div>
You can still do the rest of your styling for the background image e.g. background-size in CSS for your jumbotron.
CSS files won't be parsed by PHP unless you specifically change your server to parse them or output them from PHP files with a CSS extension.
The background image when manually specified in CSS in your example wouldn't have worked because you had a relative path to specify the image location. E.g. the browser would have looked for the picture at /css/image/test.jpg rather than /image/test.jpg. If you specif background-image: url('/image/test.jpg') in your CSS it should work.
I was working on a website and after finishing up the styling I wanted to start with the server-side. At first it was "index.html" and then the extension was changed to "index.php".
I loaded up XAMPP and went to run the website and one of the images failed to display. The image is actually a background image of a DIV (Bootstrap Jumbotron). I then changed the file extension back to .html and the image displays successfully. Then again back to .php and the image fails to display.
I then attempted to use a different image from the same folder (while the extension is .php), and it actually works. All other images work except this one image that fails to display.
Here is the CSS for the background image:
/* Does not work */
.jumbotron_image
{
background-image: url('../Images/lonely%20android.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* Works successfully with a different image */
.jumbotron_image
{
background-image: url('../Images/normal%20android.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
This is really weird and I have no idea what is causing it. I am thinking the fault lies with the image itself since all other images work. Any ideas are welcome.
Everything else 100% works, so I'm 100% positive the error lies in the file path I'm using for the image.
The image doesn't load.
Either
A) I need the file to appear in the Zend workspace, how do I do that.
or
B) My path is wrong.
Here's my file heirarchy:
And here's my CSS code:
#nav-menu li{
float: left;
margin: 0 0.15em;
}
#nav-menu li a:HOVER{
background-color: yellow;
}
#nav-menu li a{
background: url(./img/buttonbackground.jpg) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
I assure you, the image IS physically there, in my disc, but the path is wrong I guess.
A relative path must be relative to the css file, if the code you posted is in that CSS folder, you need:
background: url(../img/buttonbackground.jpg) #fff bottom left repeat-x;
The leading . is making the image url relative to the url of the html file. Removing the . will make the path absolute to the host.
It's worth noting that the Zend Framework uses url rewriting to route all urls which don't map to a file to index.php.
I've had this too, but cannot remember what I did to fix it.
Try to find the the icon depicting a small triangle pointing down (top of the file browser). It's the right most icon with a tooltip labeled View Menu. Click it and pick Filters. Check if there is a filter that might be causing the file to be invisible. If this doesn't help try switching perspectives. Also try to right click the folder and pick Refresh.
You can also try to copy the file from the physical location by right click copy and paste it into the img folder through your Zend Studio/Eclipse to make sure you really placed it in there.
If I misunderstood the question and this is only about the file not showing in the webbrowser, disregard the above and remove the . (but not the /) from the filepath in the CSS file to make it relative to the WebRoot.