Show gradient image over another image with css and html -
I want to show a gradient image on another image but the gradient image is not shown on the second image. My code is as follows:
& lt; Style & gt; .splash-gradient {background-image: url ('images / gradient.png'); Background-position: left; Double-repeat: repeat-y; float right; Height: 300px; Width: 362px; } & Lt; / Style & gt; & Lt; div class = "col-md-6" & gt; & Lt; img src = "images1.jpg" /> & Lt; / Div & gt; & Lt; Div id = "gradient-background" class = "splash-gradient" & gt; & Lt; / Div & gt;
Avoid using empty markup only for style purposes. You can simply add a class to the existing markup
& Lt; / Div & gt; And then use this style:
.splash-gradient {position: relative; } .splash-gradient: {content: ""; Status: Completed; Top: 0; Left: 0; Background: url ('images / gradient.png') Top left repeats- y; Height: 300px; Width: 362px; } The gradient is inserted from : before pretendency and since it is in position: full , then this image Overlaps (definitely free to adjust width and height)
Comments
Post a Comment