photontorpedo

Hi, happy new year, well I hope it is anyway for all of you out there. I have two images created in photoshop CS3. One is a gradated colour, the other some scanned feathers. They are both PNG24 for transparency. (originally one image but I seperated them into the feathers and gradated colour) I have at the moment this website (offline) see image: I have the following code in CSS and HTML: Everything is going quite well now, but the subject of background images on the body and html element is proving to be a headache, and out of ten books that I have sourced not one book addresses this issue of exactly how to do this sort of thing, also they do not even seem to bother dealing with re-sizing the background image and how to best size it so that in general ALL browsers will see a reasonable image?!?! Chris Coyier on CSS-Tricks is the ONLY website that I have found that even bothers to tackle what must be a very common issue for most people and I find this so amazing. He has a code for re-sizeable background images, one with java and one using css only but I can not get it to work for me at this moment, but I will sort that out myself. Anyway my question is two fold: =========X H T M L doc============ <style type="text/css"> html {background: url(images/warminv.png) no-repeat center top} These are the FEATHERS </style> </head> ========C S S (external)=============== * {margin: 0; padding: 0;} body {font-family: georgia, serif; background-color: ; background-image: url(images/warminvgrad.png); background-repeat: no-repeat; background-position:;} This the gradated colour. Question 1 == I have achieved opacity by letting the colours go through the feathers on the website. I can not use the 'RGBa" tag or opacity tag, does not work obviously, because there are no rgb values that can be specified here. What i would like to know is if there is a better way to achieve this, for example I could not set both images in the body, if you can then please tell me how. Question 2 == Also is there a way to set the feathers so that they appear as a full (not cut off) image in ALL browsers. Setting height and width to 100% doe snot work at all, in order to have a re-sizeable background image. I would have liked to have this website load as a complete entity WITHOUT scroll Bars on the first page only. I do not know how to do this. Thankyou very much if anyone takes the time to help me move forward from here, so I can move past this background image problem.

Well I watched CS3 for the web and if you go 3/4 way down you will find all about slicing. but maybe I am unclear as to exactly what you are looking for. But to get from the design in CS3, which i am actually doing now this CS3 for the web got me off the ground. Just go to the section on slicing. Better still, watch the videos on CSS tricks, there are three of them and they will give you exactly what you are looking for i believe becsuse they have helped me to go from photoshop to the actual web page in 24 hours. as opposed to the last 6 weeks struggling with blasted manuals and web references. the slicing is not good for html, but it gives you an extra tool. The videos on css tricks though, they are very good for getting you from CS3/4 to the web, he does absolutely no slicing and codes it himself, but his methods and teaching is very visual and practical. Sorry I can not be of any further help but I am a newbie - only been at this whole css html for 8 weeks.

Yes, you are probably right there. i do not want to regress into something that is ill-advised. however creating the website in photoshop is proving to be the answer for me. I can switch layers on and off and know exactly how the div containers should flow and how to write the html. trying to do all designing from a piece of paper was a nightmare.

Thnakyou for those tips and advice. I do not have image ready in Creative suiteCS3, it does not ship with it. It stopped back in CS2. they have device central but no clue what that is at all.

Yep absolutely. Lynda.com is excellent and professional. You can view the first several videos free, after that there is a paid subscriptition monthly or yearly - very very reasonable for what you get on there. Also you could try CSS Tricks.com, excellent resources but go to video section, it is all free and there is much more. regards Chris

Hi I have just watched a Lynda tutorial on Photoshop and Slices. However I was disturbed by the fact that throughout the video demonstartion she was constantly referring to how CS3 will generate ... html table... This defeats the purpose of CSS and the idea that tables have basically gone now. So does that mean that designing with slices should no longer be done? Unfortunatley I was unable to see her final product in HTML.

Hi, amd welcome. hope you find everything here helpful, and success with everything

ok I'm actually dumb here, I thought that I was already setting the image in the html through the <a href etc. Do you mean that I should define the image in the html document completely? I really, actually no, please can you just show me the codes for putting it in the html, and then how i should do it in css. I am so brain drained with searching for references then always getting something wrong. It is tiring. Basically I have the background design with a special little place for my navlinks. All designed in CS3. I want the design to well fit as many browsers as possible, in the sense that when it is loaded they will see the complete page without the need to scroll. The navlinks will then line up (somehow) on the same place where that part of the design in cs3 has been well specially designed. I chose to experiment down this road because you can not design with css. Navlinks are just boring things and I like to make them look visually exciting. If any of this approach is faulty please let me know.

Well, the the human brain interprets information based upon experience and conceptualizing agreed experiences. In other words when a book fails to communicate accurate information based upon the pre-sumption of the obvious what the writer thinks is obvious then the reader fills in, subconsciously, the absent information to arrive at a wrong conclusion.

Nope, sorry, none of that works. I don't understand why you can not set all this in the BODY, anyway i fiddled a bit with settings and nothing works. Basically, you make a background at a certain height and take pot luck as to who can fit it on their screen? Or you set say a common dimension such as 1024x768 (too small width for my screen)and then add parameters that tell the webpage to fit on other browsers automatically? The book I have does not mention this at all, which is pretty disgusting really when you think this should be one of the FIRST situations tackled in any book!!!!!!!!!!!

Yeh, well ok, books!!!! Ok I have a really nice design which I designed myself in CS3, I measured the design to be exactly 1024 by 768 pixels. But obviously this did not fit my screen completely so I re-did it as 1440 x 900 and inserted this as: body { background: url(lyonstea2.jpg) no-repeat scroll center top; width: 100%; length ??? auto? margin: 0 auto; padding: 0; } Problem I am having apart from the fact this is too long for my screen and I do NOT want it to scroll, is how do I specify it to fit on any screen initially when it is loaded. The full page that is? I tried height 100% but that does not work. I rumaged through HTML Dog and he completely fails to address this issue because he only talks about background image fixed and scroll and the usual stuff. he does not cover this basic topic at all - which surprised me. How do you insure that the web page is loaded and then fits onto most screens of today, including my own, I have tried adjusting the length to all sorts but nothing works. When I put in a length I only get a scroll bar anyway for the width Ugh?? So no matter how ptrecise I measure the height of my background image it never fits, so I know there is a secret to this which HTML Dog wants to keep for himself. grateful for the answer please.

I invented it myself. Thought that only the < and the ! and the > was actually required. thought I could stick in anything in between. Whoops.

User comments in the xhtml doc. I could not understand why my closing divs all over the place were changing colour randomly as if they were incorrect (shown in my texteditor pagespinner as black, if correct then they remain brown). Anyway to cut a long story short which in my case always seems to be a long story, it turns out that my comment tag ie: <!===navlinks closed===> were the problem! So after one day I had a lightening strike in my head, I decided to change them to <!---navlinks closed--->. Hey presto all my divs changed back to that lovely warm exciting brown colour again!! Any comments? Or is this another phototorpedo curiosity?

Ok you have the url. But aactually firbug is a lot different from this. Admittedly looking like it does the same things, but with this you can actually edit anyones css live and see immediate effects. In firebug for example you can only toggle settings on and off. regards

Actually I have not checked for myself BUT I did read that the team have made a similar product availbale for Safari users, they might have also for IE users I do not know. But also check out firebug which do have an option for sfari users.