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.
Related
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.
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
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:?
I'm currently working on my own Wordpress theme. I thought it'd be cool to have a dropdown box in the sidebar in which you can choose different themes, and it'll change the page background, border colors, etc a bit.
The thing is, for one theme (the default one) I have Javascript in my header.php file where the header image will change each refresh. I want this header image to go away when switching stylesheets, but it just overlaps the other one. How do I change this?
If you want to see for yourself, the box is in the right sidebar under the blue buttons. This is my testing website. Ignore the 000webhost stuff.
http://trainman1405.site11.com/wordpress/
Thank you!
The general solution here is to define all of your styles in one sheet, but namespace them so you can simply change the class on the body and the new styles will take effect. (You could also define them in separate sheets, using the namespaces, and simply reference every sheet in your <head>.)
For example, some CSS:
body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }
And then when you want to change it (using jQuery, although plain Javascript could do this job too):
$('#theme_select').change(function()
{
$('body').removeClass('green').removeClass('red'); // remove existing classes
$('body').addClass($(this).val());
});
it looks like you could use a javascript library its called jquery. You could use that to hide and display a new image e.g
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");
}
</script>
and then you have to set up a button or something to trigger this effect
so...
<button onclick="piczotheme()"> click </button>
JS newbie here
I want to have a kind of profile preview page where people can select a color (could be clicking on an image or could be a radio button) and that changes the background colors in certain divs in the preview page.
IE someone clicks on the button for red then the gradients in the background of the title bar, info boxes etc will turn to reds.
Whats the best way to do this?
I think you'd be best off if you define specific stylesheets for each 'color' (read: style) you want to be available to the user. If the user clicks on something to make his color choice, you can change the stylesheet that is loaded. You probably will need a default.css or a main.css file that contains all positioning and default coloring stuff and for each color you have a separate css file like red.css that will load the colors for each element in your dom you want to be changed.
In simple Javascript this could look something like:
<link rel="stylesheet" href="style1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle() {
document.getElementById('stylesheet').href = 'style2.css';
}
</script>
Of course, you can also include a library like jQuery to do this for you. Another option (non JS) is to do a POST when the user picks a color and change the stylesheet server side. But that will make the page refresh.
Use jQuery:
$(document).ready(function(){
$('#my-button').click(function(){
$('.title-bar').css({'background' : 'red'});
});
});
Edit:
I just hacked together a better (as in "programmatic") solution: http://jsfiddle.net/eNLs6/
$(document).ready(function(){
$('.colorchanger').click(function(){
$('#preview-div').css({'background' : $(this).val()});
});
});
I think the best way to achieve that is to have different div classes for each color (theme in general) and change the css class of the div when button or image clicked :
$('#myRedButton').click(function(){$('#myDiv').attr('class','red')});
$('#myBlueButton').click(function(){$('#myDiv').attr('class','blue')});
And you will have a html looking like
<div id="myDiv">....the div that will have it's color changed </div>
<img src="..." id="myRedButton"/>
<img src="..." id="myBlueButton"/>
Create a base stylesheet (base.css) for general stuff and then secondary ones for each colour, eg red.css, blue.css
When a users clicks the red image, it loads the red.css stylesheet.
$('#red').click(function() {
//load red.css
}
See this question on how to change a secondary stylesheet with jQuery for more details.
I would add a class to the body and then use that in the stylesheet to create different themes.
JS:
$('#red').click(function() {
document.body.className = 'red';
});
CSS:
body.red .title{background:url('red-gradient.png');}
body.red .color{color: red}
/* etc... */
You can of course put each theme in a separate CSS file, to make things easier to organize. But for performance reasons, I suggest you load all CSS at once and just swap classes onclick, instead of a dynamic stylesheet loader .