18 replies [Last post]
Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

Ok, basically i have a picture which takes up about 800px by 600px and i want to have text div overlays, but i want some of the picture to still show through! I would like to have a greyish-transparent div. I want the text inside the div to be solid and NOT transparent.
If any1 could help that would be great!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Why not make the picture as

Why not make the picture as you would like it to look in your favourite graphics manipulation program and use it as a background?

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

ye

yer the picture is how i want it to look, its just i want overlays of text that i can put over the top which are semi transparent!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ashdude2000 wrote:... I want

Ashdude2000 wrote:
... I want the text inside the div to be solid and NOT transparent.

Ashdude2000 wrote:
... its just i want overlays of text that i can put over the top which are semi transparent!

Wink

A background image allows solid text to be overlaid on an image. You can give the image its semi-transparent look before you make it a background.

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

i want the image to be solid

i want the image to be solid and just want the bg of the div to be semi transparent so it looks sorta embedded

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'll butt out after this

I'll butt out after this post as I don't seem to be getting anywhere.

- your visitors don't see a composite image. They see the flat image produced by the browser after it merges the component images/colours. So rather than make the browser do the work, you do the compositing and use that composite as the background.

There are circumstances when the above won't work. For flat intermediate colours, use a small png with alphatransparency and sleight backgrounds for IE5 - IE6.

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

text

dude what i was saying was, i have got the image and thats fine, i also have the text positioned over the top but because the pic is different colours all over its hard to read! so i thought maybe i could have the background of the text bit slightly transparent so u can still see the picture a bit, but also still be able to read the text

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So you want two images one

So you want two images one normal and one semi-opaque lay down the full image and on the texts background place the semi-opaque one and position it to overlap?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You know, I reckon I covered

You know, I reckon I covered that in my last post, example

Wink

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

thanks

cheers dude but could you please post the javascript for it please

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No he can't this is not a

No he can't this is not a free coding service.

Everything required is in Chris's example and he has already gone further than should have been necessary by coding up a working example, and javascript is not part of the equation here, it requires some proprietary MS code to enable png alpha transparency to work with IE6.

You should be able to work out for yourself how to get hold of the file that is needed for png bahaviour in IE6, after all it's part and parcel of our skill set, failing that google to find the originating site for that file.

Examine his example carefully and you'll be able to get everything working.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

well thanks for the great

well thanks for the great help hugo

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sarcasm? was to be expected

Sarcasm? was to be expected really!

I trust you have figured out how to obtain the file required? Sorry if I appear unhelpful but a certain amount of effort is required by posters and this last part is the most minimal of effort required.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

yeh i know its a lot of work

yeh i know its a lot of work etc. and i dunno how you guys manage with all the requests for help etc, but i couldnt find the example! i visited the site and viewed the source but it didnt have a lot of information in it! so i enquired about the javascript thinking it might have some help in there

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ash your double submitting

Ash your double submitting again Smile please be careful.

In Chris's example page is all the info required, you just need to adapt the css (which is embedded in the head) to your requirements, the File required is linked to in the head as well so you can just trace the path to file and as it's plain text display it and copy to local HD, however earlier on Chris did actually provide a link to the source site for that file which also has explanation on how to apply it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

grrr

sorry to irritate again, but i have inserted the JS code into the head of my document and it then says to link it to a gif file but do i have a gif file to link it to, surely i dont link it to a gif file if its the bg of the text i want transparent!

im confused
thanks for the help!!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ashdude2000,We don't mind

Ashdude2000,

We don't mind helping and its good to see you taking the time to reply to other posters when you know the answer. But, as you'll come to appreciate, if you post something, its nice to know someone has read it and tried to take it all in. Wink

My link above pointed to the sleight backgrounds page, down the bottom there is a paragraph about implementation:

allinthehead.com wrote:
Implementation is easy:- just link the file into the head of your page. The script looks for a transparent GIF called x.gif, so you’ll need to make sure that’s in place, or edit the script accordingly. If you have other scripts on the page, lookout for onload conflicts. ...

If you take a look in the script I used, you'll see the name/location has been modified. You'll need to modify it to suit your own website file structure.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If it helps; when you open

If it helps; when you open the pngbehavior.htc file you are looking for this line in red which is the default path:

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

The script looks for the gif file in the directory of the page that the script is being run on not from where the script lives and is called from.

Chris has probably changed his path so that the image is looked for in his general images folder and so that he doesn't have to move the gif to different folders so his path to file might look something like this:

var blankSrc = "/images/blank.gif";

Edit/ Just in case there might be confusion there are two scripts that deal with pngs the one called pngbehavior.htc deals with images that are foreground/inline ones, and the bgsleight.js deals with background images (and I note that it is in fact a .js file Smile)

If adjusting the path for bgsleight then you need to change all instances of :
url(x.gif)

to the path of your choice.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ashdude2000
Offline
Regular
Last seen: 13 years 27 weeks ago
Joined: 2006-10-25
Posts: 46
Points: 0

thanks

thanks