Is there a way to overlay linear-gradient on a background image WHEN the background image is not set in CSS?
This is my generated markup and I can't change it:
<div class="card bg-inverse">
<img class="card-img" src="img/major-search-result.jpg" alt="Card image cap">
<div class="card-img-overlay d-flex align-items-end">
<h4 class="card-title">Accounting</h4>
</div>
</div>
And I would like to make the background image slightly tinted. I know it can be done if the background image is also set in CSS like this:
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
But what if the background image cannot be set in CSS and generated by the CMS? Is it possible to ONLY set the linear-gradient with CSS and not the actual background image?
Related
I've a BG Image and and a normal bg color.
The Image is not repeating, how can i make a smooth transition.
I thought about something like a gradient effect at the bottom of the image.
That's how it is now:
enter image description here
<div>
<div
className='min-h-screen bg-gray-700 bg-no-repeat pb-10'
style={{
backgroundImage: `url(${settings[0]?.bgImage})`,
}}
>
// Content
</div>
</div>
In the container div try something like
<div className='bg-gradient-to-r from-gray-900 to-indigo-500'> </div>
https://tailwindcss.com/docs/background-image
I'm trying to set a hue-rotate(90deg) filter to a png image. But it changes just background-color. How can I change the image color via hue-rotate?
Here is jsfiddle
Go through it
img{width: 100px;height: 50px;mix-blend-mode:lighten;background:#fff;margin-bottom:-5px;}
.red{ background-color: #f00;display:inline-block;}
<div class="red">
<img src="http://truncgil.com.tr/pillow1-main.png">
</div>
I have an img inside div. I want the image to be clipped off (half or three-fourth) using CSS.
E.g.: In the example from below: the final image should get cut, as specified by the user, either by 50%, 75%, etc.
Code:
<div class="row">
<div class="col-xs-6 col-xs-offset-2">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png" />
</div>
</div>
Demo
I have been searching for answers everywhere and can't find one that fits my needs. So I created a Fiddle to explain what I want to achieve: http://jsfiddle.net/Fran6/jbo5pfs4/3/
HTML:
<div class="col1">
<img></img>
<h1>Title 1</h1>
</div>
<div class="col2">
<div class="box1"><img></img>
<h1>Title 2</h1>
</div>
<div class="box2"><img></img>
<h1>Title 3</h1>
</div>
<div class="box3"><img></img>
<h1>Title 4</h1>
</div>
</div>
I have containers positioned on the page. They have images and I would like to have them not stretched. I actually would like the same effect than for background-image: cover. That is my first question.
Then, I would like to have a zoom effect on the image when I hover it, via the link that is implemented with the title.
I can achieve these things separately but not together. Also, I started by using background images instead of in HTML but could not do the zoom effect.
So if anyone could help me solve my problem, that would be very nice !! :-)
Thanks !
I can complete the background-image: cover. Create a html tag with a id of 'cover' like so...
<div id="cover">
<!-- content -->
</div>
Then, you need to do the following in CSS.
#cover {
padding: 0, 0, 0, 0;
background: url(http://placehold.it/300x150) top left no-repeat;
background-size: cover;
height: 300px;
}
I would imagine to do the zoom effect, you could possibly use :hover although I'm not 100% sure.
Hope this helps though.
how would I go about making this kind of background: i have a 150px x 150px image which I would like to repeat through the whole background. But the very top line (the top 150px) a different image should repeat just on the x axis. And same on the bottom, the bottom line a third image should repeat on the x axis. How would I do this? Thank you!
Try this out!
body {
bacground: url(topbackground.png) repeat-x,
url(bottombackground.png) bottom fixed repeat-x,
url(centerbackground.png);
}
Also, here's a link to an example with a bunch of kitten pictures!
http://jsfiddle.net/7Rt99/
You could create 3 different divs for this so that you can repeat each background in separate parts.
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
#one{
background-image:url('http://www.shrtclothing.com/images/share/facebookthumb.jpeg');
background-image:repeat;
width:1000px;
height:150px;
}
http://jsfiddle.net/hVvdL/