I want to show gradient image over another image but the gradient image is not shown over the another image. My code is as follows:
<style>
.splash-gradient
{
background-image: url('images/gradient.png');
background-position: left;
background-repeat: repeat-y;
float: right;
height: 300px;
width: 362px;
}
</style>
<div class="col-md-6"> <img src="images1.jpg" /></div>
<div id="gradient-background" class="splash-gradient"></div>
Avoid to use empty markup only for styling purpose. You could just add a class to the existant markup
<div class="col-md-6 splash-gradient">
<img src="images1.jpg" />
</div>
and then use this style:
.splash-gradient {
position: relative;
}
.splash-gradient:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url('images/gradient.png') top left repeat-y;
height: 300px;
width: 362px;
}
the gradient is inserted on the :before pseudoelement and since is in position: absolute it overlaps the image (of course feel free to adjust width and height)
Related
do you know how can I make image not crop but also not strech. I tried using object-fit cover, but it streches, it loses height, what I want to achieve is something like this, using either images, or maybe clippath
What I tried so far:
.bar {
background-image: url("../../img/home/bar-bottom.svg");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 174.55px;
}
.wrapper {
position: relative;
}
<div class="wrapper">
<div class="bottom-shape-img">
<img src="/static/media/bottom-shape.fc5ce966aeea4c482f4f5df0d5beec8c.svg" alt="BottomShapeImg"></div>
<div class="bar">
</div>
</div>
When I resize it goes like this:
Try to put an ID and on css sheet give that id an width of 100%
#test {
width: 100%;
}
<img src="image.png" alt="BottomShapeImg" id="test">
This question already has an answer here:
Fill SVG path element with a background-image
(1 answer)
Closed 10 months ago.
I have a .jpg file and an .svg file and my goal is to make the .jpg file as background of the svg file but I did not find any way, is there such a possibility?
My goal I try to achieve is:
Context
You can use an SVG just like any other image, using
background: url('my.svg') or
<img src="my.svg" />
To show one image over the other, you need two elements, each holding an image.
There are generally two ways to do this:
having two elements, each with a background, overlapping each other
one component with a background, that is displaying an image.
The parent will have to be position: relative and the children, absolute.
Example 1
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
min-height: 100vh;
}
.element1 {
position: absolute;
width: 100%;
height: 100%;
background: url('https://picsum.photos/800/600');
background-size: cover;
}
.element2 {
position: absolute;
width: 100%;
height: 100%;
background: url('https://picsum.photos/200/300') center no-repeat;
}
<div class="wrapper">
<div class="element1" />
<div class="element2" />
</div>
Example 2
body {
margin: 0;
}
.element1 {
width: 100%;
height: 100%;
text-align: center;
background: url('https://picsum.photos/800/600');
background-size: cover;
}
<div class="element1">
<img alt="my text" src="https://picsum.photos/200/300" />
</div>
I would like to define the background image for whole table with DNA image and I want to use default color gray for whole table but some of columns I need with white color.
If I try to override the background color, the DNA image is gone.
I have tried this one with bootstrap:
HTML:
<div class="container mt-3">
<div class="row">
<div class="col-6 col-white">col1</div>
<div class="col-6 col-white">col2</div>
</div>
<div class="row">
<div class="col-6">col3</div>
<div class="col-6">col4</div>
</div>
</div>
CSS:
body{
background-color: yellow;
}
.container{
background-color: gray;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna%20(1).png');
background-repeat: repeat-y;
background-position: 50px 0;
}
.col-6 {
padding: 20px;
}
.col-white {
background-color: white;
}
Demo: https://jsfiddle.net/6sugwzbh/2/
Currently:
Expected:
How can I override only background color, but not background image as well?
You could just add the DNA as a repeating background to an after pseudo element on the container, positioning it just to the right a bit.
This will go over everything without affecting anything else's positioning.
You need to set the position of the container though so that its pseudo element can position itself in relation to that.
Add this to the CSS:
.container::after {
content: '';
position: absolute;
left: 50px;
top: 0;
width: 30px;
height: 100%;
background-image: url('https://raw.githubusercontent.com/skoruba/css-bg-img/main/dna%20(1).png');
background-repeat: no-repeat repeat;
background-position: center center;
}
and add position: relative to the .container but remove the background-image from there.
So I have a transparent image I want to place ontop of an image to create a "fade out" effect. I also have a background image. So all up there is three images.
This is my code
<div class="jumbotron">
div class="hero-dashboard">
<img class="center-block" src="../../img/hero-dashboard.png">
<div class="fade-bottom">
</div>
</div>
CSS
.jumbotron{
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
}
}
They all have to be inside the "jumbotron" div.
Its on the page but it doesn't seem to be listening to the positioning. Can anyone help?
1- The parent div (jumbotron) should have relative position when children are absolute and should have height and width to be visible.
.jumbotron {
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
position:relative;
top:0;
left:0;
width: 500px;
height:30px;
} // correct this closing tag
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
} //correct this
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
// } remove this
// } remove this
2- also correct opening tag < before div class="hero-dashboard">
3- correct the order of opening and closing tgas in your css {}. They seem weird!
Thanks for your help.
I closed the css tags {} like that because I need them to sit within the jumbotron div class. As they are the children of it. Correct me if I'm wrong but I was under the impression that it was the right way to do it.
<div class = "LeftMain" >
<a href = "#" > <button>Go</button></a>
</div>
.LeftMain{
float: left;
width: 600px;
}
.LeftMain {
background: url(Astronaut.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
I'm creating a mini project, and I am trying to create a button appear in front of a background image, this doesn't really work as it only displays a bit of the top part of the background image along with the button "Go". I have floated the section as its two parts but I'm just talking about the left side for now. So how can I make the full background image appear with the button in the centre of the background image?
Do you mean something like this?
.container {
width: 200px;
height: 200px;
position: relative;
background: url(http://www.indiacrunch.in/wp-content/uploads/2014/11/Astronaut-in-India.jpg);
background-size: cover;
background-position: center;
}
.container button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<button>Go</button>
</div>