My code always got this problem:
<?php
$imgurl = "https://cdn.jsdelivr.net/example.png";
$get_style = 'background-image: url(\''.$imgurl.'\'); ';
?>
<figure id="centerbg" class="centerbg" style="<?php echo $get_style; ?>background-position: center center;background-attachment: inherit;">
But whatever I do, the html always shows:
<figure id="centerbg" class="centerbg" style="background-image: url("https://cdn.jsdelivr.net/example.png"); background-position: center center; background-attachment: inherit;">
I also tried:
<figure id="centerbg" class="centerbg" style="background-image: url(<?php echo $imgurl ?>);background-position: center center;background-attachment: inherit;">
But no use at all!
Can anyone help me? TAT
Thanks for your help, but seems my and your codes all work fine in this single file:https://api.mashiro.top/cover/test.php , but always get the escape character in my production site (the same HTML id as the cover image): https://2heng.xin/ , really strange, and could be any possibility that other parts get wrong in my site?
I don't know why style="background-image: url("https://cdn.jsdelivr.net/example.jpg");" could show images in my browesr (Chrome & Firefox), but this is not a good expression ugh?
You can also just remove the single quotes on your $get_style variable.
<?php
$imgurl = "https://cdn.jsdelivr.net/example.png";
$get_style = 'background-image: url('.$imgurl.');';
?>
<figure id="centerbg" class="centerbg" style="<?php echo $get_style; ?>background-position: center center;background-attachment: inherit;height:100%;">
And it seems your site is using WordPress, so this link might help you as well.
You can mix double-quotes and single-quotes for this situation:
<?php
$imgurl = "https://cdn.jsdelivr.net/example.png";
$get_style = "background-image: url('".$imgurl."'); ";
?>
<figure id="centerbg" class="centerbg" style="<?php echo $get_style; ?>background-position: center center;background-attachment: inherit;">
Just us this.
<?php
$imgurl = "https://cdn.jsdelivr.net/example.png";
$get_style = "background-image: url('".$imgurl."');";
?>
You also can take a look into http://php.net/manual/en/function.htmlspecialchars-decode.php if you still face the same issue.
Try this out - I use this method a lot without issues.
<?php $imgurl = 'https://cdn.jsdelivr.net/example.png'; ?>
<figure id="centerbg" class="centerbg" style="background-image: url('<?php echo $imgurl; ?>'); background-position: center center; background-attachment: inherit;">
Related
On a Wordpress theme site I have this code:
<div class="gallery-img" style="background-image: url(<?php echo esc_url($image['sizes']['thumbnail']); ?>);">
However I need the background image url to be in ''.
So it works like this:
<div class="gallery-img" style="background-image: url('<?php echo esc_url($image['sizes']['thumbnail']); ?>');">
With it like that the PHP then does not work, how can I do the above so it works and so it has the '' around it?
How about inverting your single and double quotes ?
<div class="gallery-img" style='background-image: url("<?php echo esc_url($image['sizes']['thumbnail']); ?>");'>
I know I'm probably missing something really obvious, but the background image isn't pulling through...
<div style='background-image: url(<?php echo $blogImage; ?>");'>
I've also tried:
<div <?php echo "style='background-image: url($blogImage);'";?> >
Syntax error
Use this
<div style="background-image: url('<?php echo $blogImage; ?>');">
Hope this helps
You have a missing " before the php opening tag. try to add it and check.
<div style='background-image: url("<?php echo $blogImage; ?>");'>
In my page.php I am trying to output the featured image in .page-wrapper div and display using style="background-image: url('<?php echo $thumb['0'];?>') !important;" on top of the page (Inline css)
The problem is it keeps on being crossed out by the browser. It may be because there is a 3rd party plugin and that could be overriding it - so I've tried adding !important tag to my property. Not working. And I'm disabled the plugin, no luck. IDEAS??
Link to page: http://radian3.com/events/
Here is the page.php
<div class="about-container">
<!-- The POST LOOP -->
<?php if(have_posts()) :
while (have_posts()) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>') !important;">
<b class="about-title"><?php the_title(); ?></b>
<!-- <div class="about-icon-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')"></div> -->
</div>
<div class="contact-body-wrapper">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else :
echo '<p>No content found..</p>';
endif;
?>
CSS
/* single.php page */
.page-wrapper {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
/* background-image: url('../img/about-our-team.jpg') !important;
*/ height: 30rem;
background-repeat: no-repeat;
background-size: cover;
}
Actually, its your code in page.php that's doing the overriding.
The image you see crossed out id included in your css file, the one with the emply url the one generated by your code.
Your code isn't returning any image, so you need to fix that. Unless you have $post explicitly defined, it wont have a value here, so $post->ID will be empty.
You should use get_the_ID() inside the loop, i.e.
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full' );
if ($thumb){
?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')">
<?php
// rest of your code....
}
FYI, you should also check to make sure $thumb has a value - if it doesn't, you could use a default placeholder instead
You need to remove inline style attribute which sets no image to it but it is overriding css for background image url for page-wrapper
You need to remove the following attribute from page-wrapper div.
style="background-image: url('') !important;"
Please give like this
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
I have initialize a variable to fetch from this directory as shown
<?php $imgSrc = base_url()."decoy/thumbs/".$item["filename"]; ?>
now I want to assign the variable to a background url of css code block as shown but it is not displaying the image background
<div style="background: url('<?php echo $imgSrc ?>') no-repeat;" class="large"></div>
can anyone kindly assist me on how I can I achieve the above.
Follow these easy steps to investigate your problem.
After getting the image
<?php $imgSrc = base_url()."decoy/thumbs/".$item["filename"]; ?>
Verify what was returned to the image variable <?php echo $imgSrc; ?>
That way you will be better placed if you find nothing wrong update your question with the necessary information.
Finally I prefer you use string concatenation instead change this
<div style="background: url('<?php echo $imgSrc ?>') no-repeat;" class="large"></div>
to
<?php
$imgSrc = base_url()."decoy/thumbs/".$item["filename"];
echo '<div style="background:'.url($imgSrc).' no-repeat;" class="large"></div>';
?>
You need to put the "imagePath" in place of "imgSrc" so that the image will prompt in backgroud, because in the backroud-url there is no need of absoulte path only relative path will be ok for this.
$imgPath = "../decoy/thumbs/".$item["filename"]";
<div style="background: url('<?php echo $imgPath; ?>') no-repeat;" class="large"></div>
This is my code :
echo '<div class="banner" style="background-image: url(<?php echo $img_Array["sizes"]["large"]; ?>);">';
If I do
echo $img_Array["sizes"]["large"];
I get correct image path but when I use it inside background-image it does not worked for me.
When I used inspect element it displayed:
element.style {
background-image: url(<?php echo $img_Array[;
}
That means it needs to escape quotes(") of sizes , i tried to use /" but didnt work .
Any help would be appreciated . Thank you .
Try this..
echo '<div class="banner" style="background-image: url(' . $img_Array["sizes"]["large"] . ' );">';
When you echo, you are already in PHP. No need to use <?php again.
echo '<div class="banner" style="background-image: url(<?php echo $img_Array["sizes"]["large"]; ?>);">';
Change it to:
echo '<div class="banner" style="background-image: url(' . $img_Array["sizes"]["large"] . ');">';
It seems like you've tried to nest PHP code blocks. There are 2 possible solutions:
Echo the entire HTML code from the PHP block:
<?php
echo '<div class="banner" style="background-image: url('
. $img_Array["sizes"]["large"] . ');">';`
?>
Echo just the URL with a PHP block nested in HTML:
<div class="banner" style="background-image: url('<?php echo $img_Array["sizes"]["large"]; ?>');">