/    Sign up×
Community /Pin to ProfileBookmark

PNG transparent bg <input> or <button> frustration!

Copy linkTweet thisAlerts:
Oct 25.2007

Hi There,

im currently trying to create a web application and the design has a full screen background but also lovely rounded edged things and transparent things. (which require png’s) i’ve managed to get the png’s to work in ie6.

The form buttons simply refuse to have a transparent background however.

the page im currently working on is:
[url]www.acornmedia.co.uk/test2/oak/[/url]

My other problem is that im using sIFR with sWmode: “transparent” enabled. this doesn’t seem to work in IE6 however, it simply displays nothing.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonOct 25.2007 — Well, I'm not really sure how to solve your form button image problem. However, it doesn't seem that your background is as fullscreen as you think it is. On my screen it repeats horizontally, and if I hit F11 (fullscreen mode), it repeats vertically too.

The problem is, that no matter how big you make it, someone will always end up having a screen bigger than you think. You could make the colours fade to black at a certain width and height though, centre the image horizontally, prevent it from repeating and set the background colour to black, that way once the image stops, the background colour fills in the rest of the space.

[upl-file uuid=649f1ef1-a402-4a87-b42d-84a8e7d545c1 size=89kB]oops.jpg[/upl-file]
Copy linkTweet thisAlerts:
@copesauthorOct 25.2007 — Thanks for replying, i do realise the problem with the tiling of the background. For the moment that isn't that much of a concern to me, i know im going to have to fade to black on the right and bottom edges ? it was just a quick background to try and get the png stuff working correctly before i fix that kinda of thing.

Interestingly the sIFR doesnt seem to be working on your screenshot, do you have js disabled or flash?
Copy linkTweet thisAlerts:
@David_HarrisonOct 25.2007 — I have the Flashblock extension installed for Firefox. If there's flash on the page, it replaces it with an empty box and a button to enable the flash.

I'd have to assume that the way sIFR works is by first including a bit of flash on the page which returns a value to the JavaScript, but if I've not allowed it to run sIFR must assume I don't have flash.
Copy linkTweet thisAlerts:
@copesauthorOct 25.2007 — I thought id expand on things i've tried see if anyone can see a mistake or something.

attempt 1#:

[CODE]<button type="submit" class="loginbutton"><img src="images/png/login_button.png" alt="Login" width="173" height="41" /></button>[/CODE]

using the pngfix.js from http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

[B]works for regular images (login icon) but white borders for the submit element.[/B]

Attempt 2#:

[CODE]<input type="image" src="images/submit_dark.gif" name="submit" value="Submit"> [/CODE]

Using the same pngfix.js

[B]Works in Firefox, but not in IE6 unable to test in IE7 here.[/B]

Attempt 3#:

[CODE].loginbutton {
width: 173px;
height: 41px;
border-style: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../images/png/login_button.png');
background-image: url(../images/png/login_button.png);
background-repeat: repeat;
}
.loginbutton[class] {
background-image:url(../images/png/login_button.png);
}

<input type="submit" class="loginbutton" />
[/CODE]

[B]Doesnt work in either browser.[/B]

Does anyone know any other methods to implement .PNG support?
×

Success!

Help @copes spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...