Dealing with a diagonal background image (not a pattern)

[_jackrogue]

I’m having a hard time with a diagonal background image. This is not a “pattern”, but a full image used in two types of layouts. (Image: http://i.imgur.com/mcWseu1.jpg)

On one template, the image should remain fixed on the page at 100% height, positioned to the top right and scrolls with the page.

On the second template, the image should maintain the same aspect ratio as it would in template one, but it should not be fixed. Instead, it should scroll up with the rest of the page.

I’ve been able to achieve the desired result for template one, but I’m having a hard time with template two.

Is Javascript the only solution here? If so, any recommendations? Again, the challenges I can’t fix:

• Get the image to maintain the same aspect ratio as it would in template one (if it’s 100% height to fit the window in template one, then it should size at 100% height in template two with the exception of being fixed) This is to maintain consistency between pages using separate templates.

Thanks for the help.

Edit: I have no code to reference for the actual challenge I’m facing. But here is the solution I’ve found for the first template:

CSS (applied to an img element):

.abovefold {
width: auto;
height: 100%;
position: fixed;
top: 0;
z-index: -1;
}

[Historical Forums User]

I think you would have to use javascript indeed.

You could go with something like

var yourimage = document.getElementyById('yourimagesid');
yourimage.style.height = window.innerHeight+"px";

and the CSS would just be:

#yourimage {
width: auto;
position: absolute;
top: 0px;
right: 0px;
}

and make sure that you call the javascript function after the image is loaded. Also you might need an image at a higher resolution, since some desktop computers can have windows as high as 1500px or even more.

I hope this is the effect you wanted to achieve, I was not quiet sure after reading your post.

[Author]

Posts