PDA

View Full Version : scale .PNG 24 image ?



daxtrajero
05-01-2012, 05:01 PM
I have a new website project where there's a large central image on the screen.

I've recently seen javascript(?) that can scale an background image to cover the whole browser screen.

I was wondering if I can apply a similar concept to scale the foreground image ?

Also, is it possible to set the scale eg. 75% of the browser window ?

ApacheTech
05-01-2012, 05:15 PM
Both of these can easily be handled in CSS, no JavaScript is needed.



//CSS Style

img.scale75
{
max-height: 75%;
max-width: 75%
}

daxtrajero
05-01-2012, 05:30 PM
Thanks man

Will it work with .PNG 24bit, and preserve the alpha transparency ?

I want to either use a background image, and lay a foreground image on top, preserving the alpha transparency ?

I'll be using javascript to update the foreground and background image dynamically on a mouse click.

ApacheTech
05-01-2012, 06:46 PM
The file type has no relevance to the CSS. CSS doesn't care what the image is, only how and where to display it. If the image has transparency, the CSS will not alter it in any way.

For a background image try:



body
{
background: #000000 url( 'path/to/image.png' ) fixed no-repeat center center transparent
}

daxtrajero
05-01-2012, 07:53 PM
ah, thank you - I'll give this a try

so when CSS is rescaling, does it use any fancy tricks to alias the image, for a smooth rescale ? I think that's what a jquery rescale looks like it does ?

For example, would I get similar results to this?
http://johnpatrickgiven.com/jquery/background-resize/

ApacheTech
05-01-2012, 09:29 PM
CSS cannot do any fancy tricks. It's not a programming language. It's just a list of properties. It cannot edit files or images and doesn't even read the image files it refers to. That's all it does, refer to the file. CSS doesn't care about what content it displays; all it cares about it how big you want it and where you want it on the page.

ApacheTech
05-01-2012, 09:42 PM
Think of an external css stylesheet as simply cleaning up your HTML code. Inline CSS works identically to an external stylesheets or internal styles, but you specify all the CSS for each line of HTML you write.

External CSS stylesheets simply take all that Inline CSS into one file and add selectors to identify the tag it's refering to, by ID if it's a unique style, by CssClass if it's non-unique or by Element if it's global.

There are slight differences; inline CSS supercedes internal styles, which in turn supercedes external stylesheets and the external stylesheets supercede each other dependent on the order of the <link /> tags in the page's <head>.

CSS does not use variables (on it's own), nor does it store values. It is also completely client-side, there is no communication between CSS and the server. CSS is implemented by the browser at runtime only after it has parsed the page and manifested the DOM Tree. As such, CSS does not bubble through the DOM Tree.