<div class="site-blocks-cover overlay bg-light" style=" background-image: url('public/template/images/hero_bg_1.jpg')" id="home-section">
The photo doesn't appear on top of website.Also i didn't receive any error
the website
Try using url function of Laravel
background-image:url({{url('template/images/hero_bg_1.jpg')}})
You Must add {{url(' ')}} this to echo Your image
so your code must be
<div class="site-blocks-cover overlay bg-light" style=" background-image: url('{{url('public/template/images/hero_bg_1.jpg')}}')" id="home-section">
and another one you can use it asset()
like this
<div class="site-blocks-cover overlay bg-light" style=" background-image: url('{{asset('public/template/images/hero_bg_1.jpg')}}')" id="home-section">
Related
I've thrown my data to my blade. I'm using inline css. In this case, I need background: url(..) instead of <img>. On browser when i inspect and open the img in new file it opens but css is unable to parse and display it. Should i give it some more location?
Currently, I'm trying this out.
<div class="row profile-cover" style="margin: 0;
background: url('{{$userDetails->profile_img}}')">
where
$userDetails->profile_img= gallery/client4/avatar_1530513317_1532258485.jpg;
You can write this. Hopefully this will solve your problem
<div class="row profile-cover" style="margin: 0; background: url({{ asset($userDetails->profile_img) }})">
Or
<div class="row profile-cover" style="margin: 0; background-image: url({{ asset($userDetails->profile_img) }})">
I am trying to integrate Cloudinary into my webpage. The problem is that when I use the code below:
<div class="col-md-4 col-xs-6 text-center product-image">
<?php
echo cl_image_tag($product['product_url'],
array("width"=>400, "height"=>300, "crop"=>"fill"));
?>
</div>
The image is not responsive due to the fixed proportions: "width"=>400, "height"=>300.
Is there a way of adjusting these parameters dynamically to the width and height that Bootstrap defines for the div?
I have tried this:
<img class="img-fluid img-thumbnail" style="max-width: 400px; max-height: 300px;" src="<?php echo $product['product_url']; ?>">
But then the size of each image is different, because each one has different dimensions and aspect ratios.
Why cant you use class .img-fluid with max-width: 100%; and height: auto;`
This link may help
While using .img-thumbnail you should not use width and height
Here is the link
You could try add this to css:
.product-image img {
width: 100%;
}
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
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 have two sizes of images (vertical and horizontal), they will always be the same size, respectfully. I am trying to create a container that would hold the image but not push the content over and stay a similar height or width. I also dont want to show the image full size so I was thinking about using overflow:hidden. I have attempted this in a JSFiddle seen here but it stretches the container. Any help is appreciated.
<div>
<span class="mixSpanLeft">
<img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" />
</span>
<span class="mixSpanRight">
<p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes? Should I have completely different styles for them?
</p>
</span>
</div>
http://jsfiddle.net/hmjoLmej/4/
What about something like this.
I used the more appropriate flexbox instead of float, which gives greater control of the layout.
The image is added using background, which gives greater control to scale, clip, etc.
Note, since the p is block element they should not be children of a span (which is inline element), so I updated your markup/CSS with a div
Updated, showing how you can add the image source in the markup
.wrapper {
display: flex;
}
.mixSpanLeft {
width: 50%;
background-color: #abc;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.mixSpanLeft a {
display: inline-block;
height: 100%;
width: 100%;
}
.mixDivRight {
width: 50%;
background: #def;
}
.mixDivRight p {
padding: 2%;
}
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>