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!
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?
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!
Ashdude2000 wrote:... I want
... I want the text inside the div to be solid and NOT transparent.
... its just i want overlays of text that i can put over the top which are semi transparent!
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.
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
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.
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
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?
You know, I reckon I covered
You know, I reckon I covered that in my last post, example
No he can't this is not a
No he can't this is not a free coding service.
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.
well thanks for the great
well thanks for the great help hugo
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.
yeh i know its a lot of work
Ash your double submitting
Ash your double submitting again 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.
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!
thanks for the help!!
Ashdude2000,We don't mind
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.
My link above pointed to the sleight backgrounds page, down the bottom there is a paragraph about implementation:
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.
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 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 )
If adjusting the path for bgsleight then you need to change all instances of :
to the path of your choice.