Canvas Support

image overlay

6 replies · opened Sep 21, 2017

Wweb404Sep 21, 2017

I have one image and want to put on it image overlay, witch code can i use ? i fined portfolio-overlay and carousel-overlay but i need use overlay for one static image

IivanpossSep 21, 2017

from a user: so the way I have done it is by creating a container to house the background image. Then I place the overlay image inside its own div but inside the same parent container. I also place a text overlay to describe the image or make a statement- if desired.

example:
Section style="background: url('your bottom image path here') ; background-size: ;"> <br> <br> <br>

![attachment](your top image path here)

	&lt;/div&gt;
                          
	&lt;div style= "text-align: center;" class="portfolio-desc"&gt;
	       &lt;h3&gt;This is my top picture - isn't it great!&lt;/h3&gt;
	&lt;/div&gt;
            &lt;br&gt;  &lt;br&gt;
        &lt;/Section&gt;

Not sure if support would agree but this works for me.

use you own padding amounts to position the elements the way you want.

By nesting, each image and text is placed over the backgound image.

IivanpossSep 21, 2017

Sorry a line of text was cut off from a div in the code- correct version:

<Section style="background: url('your picture') ; background-size: ;"> <br> <br><br>

<div>

![attachment](your bottom image)

	&lt;/div&gt;
                          
	&lt;div style= "text-align: center;" class="portfolio-desc"&gt;
         	&lt;h3&gt;Blah Blah Blah &lt;/h3&gt;
	&lt;/div&gt;

      &lt;br&gt;  &lt;br&gt;

</Section>

IivanpossSep 21, 2017

Not sure why this support text box keeps dropping some of my respnse- this line keeps dropping out. It goes inside the first div

![attachment]( your jpg here )

![attachment]( your jpg here )

Wweb404Sep 22, 2017

support time didn't answer me ?

IivanpossSep 23, 2017

[sb_private_reply]No - It takes awhile for them to respond... so I told you what works for me. Sharing is caring.[/sb_private_reply]

create a section or div with a background picture... then place a div inside with your overlay picture or text- like this....

 

  
 

 
![attachment]( your jpg here )

Blah Blah Blah
SSemicolon WebSTAFFSep 24, 2017

Hello,

Thanks for your Patience!

Consider using the following code: 

[
	
![attachment](images/portfolio/4/5.jpg)

	
		
			
		
	
](images/portfolio/4/5.jpg)

Also make sure that you use this inside a Grid/Column or use the max-width CSS Property on the Image to make sure the Image is responsive.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard