I'm using wordpress and ACF plugins to add an image :
http://www.advancedcustomfields.com/resources/image/
I would like to add an image in a div as a background.
I used this code in my style.css but it doesn't work :
background-image: url(<?php $image = get_field('image_projet');?> <img
src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />);
Thanks for you help
A css file contains CSS. Just CSS. You can't write html or PHP into a CSS file.
If you want to generate a CSS property with PHP, you must use the <style>...</style> tags directly in your PHP file (the view). For instance :
<?php $image = get_field('image_projet'); // fetch the ACF field ?>
<html>
<head>
<title>Page's Title</title>
<style>
.your-div {
background-image: url('<?php echo $image; ?>');
}
</style>
</head>
<body>
<!-- this div uses the $image URL as a background. -->
<div class="your-div">
Lorem Ipsum.
</div>
</body>
</html>
do it this way , you can't add alt via css so use title instead, look here, SO css background image alt attribute
`<div style="background-image: url( <?php echo $image['url']; ?>); height: 200px; width: 400px; border: 1px solid black;" title= "<?php echo $image['alt']; ?>">my DIV with a background image:</div>
Related
I have an portfolio webpage, my problem is how can I adjust the image position when the image is bigger and smaller, for example I have a image that is vertically long and I have a image that is only small. how do I make the long image to be position as top while keeping the small image as centered.
I used a acf image uploader
Source Code:
<?php if( get_field('image_thumbnail') ): ?>
<div class="image__thumbnails" style="background-image: url(<?php the_field('image_thumbnail'); ?>);background-position: top;background-size: 100%;background-repeat: no-repeat;"></div>
<!-- <img src="<?php the_field('image_thumbnail'); ?>" />-->
<?php endif; ?>
css
.image__thumbnails {
height: 212px;
}
you can try css property:
.image__thumbnails{
height:200px;
width:200px;
object-fit:cover;
}
also :
object-fit: contain,cover,fill, etc...;
.wrapper
{
display:flex;
/* align-items:center; this doesn't works in ie11 */
}
.wrapper > *
{
align-self:center; /* this works in ie11 */
}
Is there a way of using a php variable to manipulate css?
I'd like to add an image chosen by a user in a wordpress post (featured image) to the background of a specific div. I know how to mix php and html but, is there a way of doing the same with css?
I'm getting the image with:
$img = get_the_post_thumbnail_url($post_id, 'mySize');
Well, you already know how to mix PHP and HTML, right? Then you just do the same, but creating a <style> element in <head>. You put your CSS in this element. Something like this:
<head>
<style>
div#myDivId { background-image: url("<%= $img %>"); }
</style>
</head>
What you could do is something like this:
<head>
<style>
.user img { background-position: center center; background-repeat: no-repeat; background-size: cover; }
</style>
</head>
...
<div class="user">
<img src="images/trans.png" width="50" height="50" style="background-image:url(<?php echo $img; ?>);" />
</div>
Where trans.png is a small transparent png image.
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 this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I am using custom template in wordpress. This is the code
<a href="<?php echo get_category_link($cat->term_id); ?>">
<img class="home-img" src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
<p><?php echo $cat->cat_name; ?></p>
</a>
</div>
<?php endforeach; ?>
which is displaying category with category images like this Screenshot1.
I want to display the text on the image not below the image.
Change the position of the paragraph:
p {
margin-top: -50px;
width: 100%;
text-align: center;
}