Is it possible to get a background image in CSS like you normally do in HTML when working with WordPress. I've tried doing this but it doesn't work.
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
PHP code cannot run in .css file, however you can use inline style, such as:
<div style="background-image: url("<?php //url ?>");">
or
<style>
.class-name {
background-image: url("<?php //url ?>");
}
</style>
The above would be useful when working with custom fields for dynamic image paths.
If the image is located in the theme directory, PHP won't be needed, let's say the image folder is directly under the theme folder /theme-name/images, and the stylesheet is /theme-name/style.css, then you can just add the background image to the css file as follows:
.class-name {
background-image: url("images/file.jpg")
}
You don't need to use PHP in this question, your CSS file is already in template folder, so you can call image just like this:
background-image: url("images/parallax_image.jpg");
So you don't need to know template path to call images from your theme.
If the image folder is in the theme folder you can use:
background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");
Just upload your image to the WordPress Media Library
After that, you can give the path of the uploaded file in your CSS like this:
background-image:url('/wp-content/uploads/2019/12/filename.png');
Note: Open the uploaded image, there will be a path
One way would be to add this CSS to a PHP page that has access to the bloginfo() function. Say in index.php, you would add...
<style>
.some-element {
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
}
</style>
Another way is accessing image using css file location as the reference point, e.g.
.class-name{
background-image:url("../images/file-name");
//one level up, then images folder background-image:url("../../images-directory-02/images/file-name");
//two levels up, then two folders in
}
I was having this issue with adding a background image to my Underscores based theme and I found this works:
background: url('assets/img/tile.jpg') top left repeat;
I first tried:
background: url('/wp-content/themes/underscores/assets/img/tile.jpg');
but that didn't work for me.
Use a style attribute in the tag and use the css.
<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>
As many people have suggested already do not use php in .css ext as it won't get interpreted.
But if you really need to use php because of some reasons you only know as you not responding, you can change the extension of your stylesheet to .php
then you can have
customestyles.php
<?php
header("Content-type: text/css; charset: UTF-8");
$sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";
?>
<style type="text/css">
.selector{
background-image: url(<?php echo "$sectionImage";?>);
}
</style>
If your images folder is relative to your theme folder that is
theme-folder/images
and that of your css is in this structure theme-folder/css/your-css-file.css
you can easily just traverse the folder path in your css e.g
.custom-element{ background-image: url(../images/name-of-image.png) }
Short answer is you can not render PHP in a CSS file. I would suggest making sure your <rel> tag is setup correctly and just using the /images/parralax_iamge.jpg part.
Just find the corresponding element (tag, class or ID) with the browser tools/inspector in your page and add a CSS rule for that element, either in the stylesheet of the child theme or in the "customCSS" field of the theme options.
you can't add php code into .css files. but if you wanna do this using php see this.
As the others have suggested, you can simply set the background-image CSS property to do this.
However, none of the URLs that the other answers suggest worked for me.
I think the reason is because all of my images were stored in the "Media" area.
For all those who are storing your images in the "Media" area:
In order to find the URL to the image, you can:
Open the Admin dashboard of your site
Open the "Media" area
Click on the image you want to use
Copy the URL from the URL field, but only the portion after the domain name (e.g. domain-name.com)
Use this as your URL for the background-image property
I wouldn't recommend using the whole URL (using it without removing the domain name) because if your domain name ever changes, the URL will break.
Here's an example of what my full URL looked like: https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg, but I only used the /wp-content/uploads/2018/06/<Name of the Image>.jpeg portion.
In the end, my CSS property looked like this:
background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");
As a side note, the URL worked with both a beginning forward slash /wp-content/... and without one wp-content/....
In the first div you can see the result from the approved response, in the second div you can see the result from
<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">
The reason it does not work in the first div is because the parser thinks that the first block of text ends where the second " occurs.
You need to echo the get_the_post_thumbnail_url() function
For example
style="background-image: url('<?php echo get_the_post_thumbnail_url();?>
FOLDER STRUCTURE: THEME_FOLDER --> ASSETS --> IMAGES
For using inline CSS which i will not recomment as it create issues when doing optimization test using lighthouse however you can use
.title{backgroound:url(' /assets/images/title.png');
}
OR in theme CSS you can use
background: url('../images/tile.jpg');
Worked for me.
Related
I want to get WordPress featured image in pseudo elements. I've used it in inline style using following code
<?php
$thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' );
?>
<div style="background-image: url(<?php echo $thumb_url[0]; ?>);">
But I want to use it in pseudo elements
Option 1
Your main concern here is caching. You don't want to write the background-image style into your external .css file because it will probably change on every page. But you don't want to clog up your main HTML file with lots of extra inline styles.
Your best bet is to split off just what you don't want cached (the background-image and the rest of the styles). We want to inline just what shouldn't be cached, and leave the rest as an external .css file.
Say the styles relevant to your Featured Images container are something like this:
figure::before {
display:block;
height:300px;
width:500px;
margin:0;
background-image:url();
background-size:cover;
background-position:center center;
}
Just leave your .css file exactly the same format (don't use .css.php), but pull out the background-image line.
Then in the header, place this:
<style>
figure::before {
<?php $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' );
background-image: url(<?php echo $thumb_url[0];?>);
}
</style>
Bonus - Another Option Just for Fun
The second option is to use a .php file with a .css HTTP header. I like to name my files something like:
styles.css.php
Advantages
This lets you use WordPress variables and data, as well as the entire power of PHP, directly in your stylesheet. But it's still sent to the browser as a .css file, so you can enqueue it like normal. It's the easiest to implement. Note, be sure to include the global post object.
Disadvantages
Do you use resource caching? If you .css files are cached, you're going to run into a problem because the file won't change on each page. In your specific case, the Featured Image will be different on each page. If you don't cache, it should be fine, but you absolutely should be caching, so you should probably skip this option.
Tweak on Bonus Option
If you like Option 1 but you do cache (which you should), you can take a middle ground. Create your file the same as above, something like:
styles.css.php
Instead of enqueueing it the official way using wp_enqueue_style, you can read the file with PHP's include function.
Create a function in your functions.php file:
function writeInlineCSS() {
include TEMPLATEPATH . '/styles/styles.css.php';
}
Then in your header, add:
<style>
<?php writeInlineCSS(); ?>
</style>
The CSS will be pulled in and written inline.
Advantages
Caching won't be a problem. Also you won't have a large render blocking .css resource. Plus the advantages from Option 1.
Disadvantages
You are including potentially a massive chunk of CSS inline. Possibly too much.
This is pulling from Mr Lister's comment, but here's a method of doing this. It's not the best way to structure the html, but it should work:
<?php $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($whatWeDo_post->ID), 'single-post-thumbnail' ); ?>
<div class="myDiv"></div>
<style type="text/css">
.myDiv:before{
background-image: url('<?php echo $thumb_url[0]; ?>');
content: '';
}
</style>
I'm not sure if you'll run into some browser compatibility issues with older browsers and the tag outside of the , but it should work in modern browsers.
I hope there's someone out there that can help. I am trying to use jQuery Backstretch to apply a different background image for each specific page within Bootstrap/Wordpress. e.g:
Home - bg image a
About - bg image b
News - bg image c
and so on...
I've managed to use the standard Backstretch script to display a single image for all pages, but I am totally lost (even after searching) on how to apply the the above.
My code so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://myurl.co.uk/wp-content/themes/wpbootstra/bootstrap/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");
</script>
I have used this in my footer.php.
Does anyone have a solution?
You could try:
<?php
if(is_page(42))
{
echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");</script>';
}
else if(is_page(41))
{
echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg_b.jpeg");</script>';
}
?>
The number 42, 41 being the id of the page. Sp text_bg_b.jpeg will only display on the About us page (assuming its id is 41).
I think there is no need for using backstretch: Just add this css styles inline to your body or main container:
background: url(PATHTOYOURIMAGE) center center no-repeat;
background-size: cover;
You should consider using a custom field for giving the path to your image. I think the easiest way is to install Advanced Custom Fields and to add a field called bg_image to every site with the image url in it. Then you can replace PATHTOYOURIMAGE with
<?php the_field('bg_image'); ?>
It is another way but I think you should give it a try.
In wordpress there is a plugin that assigns a header graphic for each page. You call that header graphic by placing this code in your header.php file:
<?php if(function_exists('show_media_header')){ show_media_header();} ?>
This basically calls the image assigned and places it as an IMG in HTML.
I would like to have it called as a background image with CSS but don't know how. For example:
.header-graphic{ background:url("show_media_header();"); }
I know that will obviously not work but that should explain what I'm trying to do.
Any help would be great.
Thanks!
Depending on the scope of show_media_header() and that it actually returns the path to an image you could write the following:
.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }
However this is of course under the assumption that your css is in the php-file, which wouldn't be recommended. You should look at using SASS or LESS instead.
It's generally a bad idea to serve static files (like CSS) dynamically, since it can't be cached effectively. So inserting the result of show_media_header() directly into your CSS is a no-go.
However, there is an alternative: Insert just that style into the HTML like so:
<h3 style='background-image: url("<?= show_media_header(); ?>");'>
Foo
</h3>
Which can then be further modified by CSS that is in a statically-served and unchanging file - for example:
h3 {
background-position: left 3px top 3px;
}
This of course assumes the function returns just the image URL; I've not used Wordpress personally.
Based on another comment, apparently this function generates a complete <img> tag (ugh!) so you might instead have to do something like this:
<h3>
<?= show_media_header(); ?>
Foo
</h3>
And style it as appropriate like so:
h3 img {
margin: 3px 0 0 3px;
}
I'm gonna post it down here because no one is considering your statement:
"and places it as an IMG in HTML"
You may have to edit you plugin output. Since show_media_header(); echo a value, the function itself is creating a <img> element. Look for the plugin file, search for the function and, either create another one, duplicating the original, something like show_media_header_bg where you manipulate the element, or change the original.
How about if you use descendant CSS selectors as such:
#page #header {
background-image: url("image.jpg");
}
#another-page #header {
background-image: url("another-image.jpg");
}
and so assign each page to its background image.
Here, I'm assuming you can grab into each page by an id (here called "page" and "another-page", and that your header template has an id of header. It would help to see some HTML to see how best to exactly achieve this via CSS.
Got it to work!
Dug around in the plugin PHP file and found this:
function get_media_header_url() {
global $post;
$post_id = $post->ID;
So I did this:
.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }
Works great!
You guys absolutely pointed me in the right direction. THANKS!!!
Inside a CMS block in Magento 1.7.0.2 I am trying to get a background image
the code that I use in the HTML EDITOR for the block is this:
<div class="imageclass" style="background: url()">
</div>
Inside the url() I should place the exact url of my image.
But the problem is that if I load from WYSIWYG folder in CMS I DON'T get a correct path
So what kind of path should I put into the url below ?
<div class="imageclass" style="background: url()">
</div>
My background image is on
/media/wysiwyg/images_cms/mybackground.png
You put in a relative or absolute URL. Also, you should put it in a class, not inline.
.imageclass {
background: url(/media/wysiwyg/images_cms/mybackground.png);
}
See the MDN docs for background-image
I needed to overcome a similar issue, however I needed them to be CMS editable for each page thus my backgorund could not be set in the stylesheet.
This is the method i used to get the media path:
<div style="background-image:url('<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) ?>mybackground.png')"></div>
This is probably some thing very simple and I tried a couple of things and various posts but none seem to get it working.
I would like to have a shopping basket image instead of 'My Cart' text in top links. How do I get this image to appear as the link instead of the text?
This image is in mytheme/images. I have tried editing Checkout/Block/Links.php, edited styles.css by putting
.top-link-cart { background url(HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/mytheme/images/cart.png)left center no-repeat; }
But can't seem to get the image instead of the text. Any help is appreciated. Thanks.
You had the following errors in your CSS:
Missing colon (:) after background
Missing space between URL and keyword left
Your image link was absolute and not relative (not an error but will make putting the site live easier)
Here is what your code should be:
.top-link-cart { background url('../images/cart.png') left center no-repeat; }
use background:url('image link') no-repeat and define then define your width and height also make sure you define text-indent: -9999px or a higher number this way you will be left with image and your text would be out of the screen.
Here are tons of other ways which you can use for Css Image Replacement :
http://css-tricks.com/css-image-replacement/
I would suggest that the URL for the image is not correct, it looks to me as though you are trying to display it using the location on disk. It actually needs to be the location, relevant to the root of your website.
For instance, if the website root is HD/Applications/MAMP/htdocs/ then you need to make the URL /devsite/skin/frontend/default/ats_theme/images/cart.png.
Alternatively, you can make it relative to your css file. So if your css file is in HD/Applications/MAMP/htdocs/devsite/skin/frontend/default/ats_theme/css/ you can change the url to ../images/cart.png
Add a colon after background:?