Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Logo / Watermark Over Features


Question

Posted · Report post

Dear PageLines Team,

I made a website with the Framework ( RacoonCanyoning ).

I used "Features" for the Slideshow at the top.

Now I would like to have logo over the features (which is a separate file from the slideshow images). On the front page of the website you'll see how I want it (in those 5 pictures I put the logo directly in the image).

I will use lots of different images for each site dfferent images (Features) in the header so I would be really cool if there is a way to overlay the photos with the logo.

best wishes

Max

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi Max,

What you could do is use a CSS pseudo element, below is an example that will add an image over your Feature slider images. You will need to add your Feature Sliders area width and height and add your watermark image, but the code certainly works.


.fset_height::after {
content: "";
position: absolute;
background: transparent url( Add image path here ) repeat 0 0;
left: 0;
top: 0px;
display: block;
width: Add your Feature Slider width here;
height: Add your Feature Slider height here;
} [/CODE]

Also, depending on your image transparency, you may need to use the opacity property.

2 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

This is amazing.

Thank you so much.

I changed the code little to:


.fset_height::after {

content: "";

position: absolute;

background: transparent url( mylogo..content/uploads/2012/10/logo.png ) no-repeat;

left: 15px;

top: 15px;

display: block;

width: 870px;

height: 290px;

}

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites