If I try to show an image after including my functions.php file into my style.php file, it will not show. When I delete the functions.php file, the image shows.
<?php
header("Content-type: text/css; charset: UTF-8");
include "inc/functions.php"; //when i delete this line, then the image will show up, but if i don't then the image won't show up.
?>
body {
color: #000;
background-image :url(http://127.0.0.1/niche/template/img/bg-image.jpg);
background-repeat: repeat-x;
background-size: cover;
font-family: 'Squada One', cursive;
}
If it is just the actual CSS you are after then why are you calling functions within it? Have you tried the inspector tool to see if the CSS is actually showing and whether something within the function file is outputting some data which is making the CSS file invalid therefore not working correctly
Surround your css with style tags
<style>
body {
color: #000;
background-image :url(http://127.0.0.1/niche/template/img/bg-image.jpg);
background-repeat: repeat-x;
background-size: cover;
font-family: 'Squada One', cursive;
}
</style>
Related
Ia have one weird issue with my Wordpress site. i have problem with header, it show different on this page and show normally on this page for ex. On bad page header image is little moved down. i checked the CSS class:
.full_width_photo {
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 380px;
width: 100%
}
ad tryed to add margin-top:-80px; but just move image inside container, not entire block as i want. Can someone to give me some tip? On image is shown the issue.
Thanks.
Look at the tag style attribute of the page, it has "padding-top:40px". You can just remove it to fix.
There are 3 CSS issues:
There is an inline margin-top: 98px; on the <body> element that needs to be removed. That will put the banner image in the right place.
The class sticky_header needs to be removed from the <body> element.
The element <div class="topbar vcenter transparent"><div class="container"><div class="row"><div class="col-md-12 col-sm-12 hidden-xs hidden-sm text-center"></div></div></div></div> needs to be removed or assigned a style of display: none;.
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'?>");
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 wondering if anyone can help. I am trying to add PHP code, which is retrieving an image from a database, into CSS.
I have the small section of CSS code on my example.php page and need to have different images for backgrounds depending on what variables were posted to the example.php page.
The terrible code that I have come up with is as follows
<style>
.par-surround {
background-repeat: no-repeat;
background-image:<?php <img src=<?=$subject['picture']?>border="0" width="740px" height="auto"/> ?> ;
background-position: center top;
}
</style>
I don't know if this can be done or if I have to do it a completely other way. Any help would be appreciated, thank you.
It can be done but you need to output proper css to do this.
background-image does not take (invalid)html image tags:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?=$subject['picture']?>);
background-position: center top;
}
</style>
The reasodin is correct. You just ned to have a valid PHP code:
<style>
.par-surround {
background-repeat: no-repeat;
background-image: url(<?php echo $subject['picture'] ?>);
background-position: center top;
}
</style>
Also make sure $subject is defined and has a value, BEFORE you output the CSS code.
I'm attempting to build a draft version of a website for the police service of a small nation using WordPress and the Webfolio Theme by Site5.com.
I've encountered a problem whereby if I select to use an image for the background of the theme using the theme's customization options/WordPress options, the black header that is repeated at the top at either side of the header does not display.
Now when I add the background image it looks like this
I tried reading the Site5 documentation but it doesn't have information that helps. Their support forums also seem quite inactive which is why I decided to ask here.
I've had a look at the CSS file and found the following:
* { margin: 0; padding: 0; }
body,html {
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
background:#EFEFEF url(library/images/bk_body.jpg) repeat-x;
}
When I add the background image the CSS is still the same so I'm not sure how WordPress themes implement optional background images. I've attempted to fiddle with it to no success, but my knowledge of CSS is limited.
My question is, is it possible to use the background image while maintaining the top header bars as in the demo site? If so, could anyone guide me on the way how?
Edit: I've also tried using the built in Background Image options but all of them have the same result.
The black bar is actually a background image applied to the body. You coud use multiple backgrounds to get the effect you're after:
body, html {
background-image: url(library/images/bk_body.jpg), url(your_image.jpg);
background-repeat: repeat-x, no-repeat;
}
I think that your problem is the background-image in header
header {
background: url(library/images/bk_header.jpg) 100% 0 no-repeat;
/*other css rules*/
}
that refer to style.css row 153
remove that image with a transparent background or something that you want.
e.g. background-color: transparent;
Please remove header image from style.css
header {
background: url("library/images/bk_header.jpg") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
remove background from header
header {
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}