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

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -