Junior Coders
scale .PNG 24 image ?
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 ?
Regular Coders
Both of these can easily be handled in CSS, no JavaScript is needed.
PHP Code://CSS Style
img.scale75
{
max-height: 75%;
max-width: 75%
}
Junior Coders
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.
Regular Coders
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:
PHP Code:body
{
background: #000000 url( 'path/to/image.png' ) fixed no-repeat center center transparent
}
Junior Coders
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/
Regular Coders
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.
Regular Coders
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.
Posting Permissions
Reply With Quote
Bookmarks