Absolute positioning for an image

  • 3 September 2013
  • 3 replies
  • 30 views
W

I’m wondering if there is a way to position an image in the top right corner of the browser page, regardless of the browser window size. Like this…

http://screencast.com/t/5ACpLt9t

Trouble is using the Unbounce interface I can’t find a way to do this. It only seems possible to position the image in ‘absolute’ terms with reference to a page section.

With css it’s simple using something like this (sorry can’t get all the html to display in this forum)…

img.top{position: absolute;right:0;top:0;}
img class=“top” src=“image/url” alt=“some_text”

but even embedding css and html in the unbounce page doesn’t seem to work

3 replies

Ryan

Hey William - you sure can

Take a look at the landing page at http://webinar.unbounce.com/ and see the ribbon in the top right corner. I’ve applied some CSS to it that keeps the ribbon in place, regardless of where you scroll.

To do this, select the image you want pinned to the upper right corner and track down the image’s ID in the advanced section of the properties pane. It should be something like #lp-pom-image-12.

Then, update the following code with your image’s ID and embed this into your page using the CSS tool:


#lp-pom-image-12 {
position:fixed;
top:0;
left:auto;
right:0;
z-index:100;
}

…that’s it. That’ll do the trick.

This is a workaround and not a built-in feature of the app so we can’t totally support all possible use cases, but when I’ve used it, it’s worked great.

Try it out and let me know how it goes.

W

Hi Ryan

that works a treat. Thanks so much for finding time to come back to me with a solution.

Cheers

Bill

H

Hi Ryan,

I tried your code, and it didn’t result in the positioning I have in mind. Maybe I am looking for different coding.

What I would like to have is the logo to be positioned on the left side of the section. Always on a 32 pix distance from the browser border.

Do I use the same code you provided in this section?

Thanks in advance,

Heino

Reply


Terms & ConditionsCookie settings