 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007Background Positioning
Hello. After getting great advice on positioning, I've edited my code and it's looking more stable. Now I need a little assistance with background image placement. Please click on this link: www.ibtestsite.info I've colored the background black and added a background image which is the blue rectangular image that stretches the height of the screen (well at least in Firefox it does). My goal is to have a centered page with no scroll bar for up and down movement or left and right. I've played around with body {....background-position: "whatever" px;} and it's not doing anything. Any advice on how to do this? > Hello. > [quoted text clipped - 8 lines] > blue rectangular image that stretches the height of the screen (well at least > in Firefox it does). Not in my FF. 2.0.0.11 Mac The black appears at the bottom as well as the sides. > My goal is to have a centered page with no scroll bar > for up and down movement or left and right. That would surely be unwise? Have you got something against people with small screens or who prefer not to use the height of theirs? O and by the way, have you an address for the undernourished girl on the page? I have some nice potatoes here that I would like to send her. I feel all motherly towards her and would like to fatten her up for Xmas.  Signaturedorayme >dorayme wrote: >O and by the way, have you an address for the undernourished girl >on the page? I have some nice potatoes here that I would like to >send her. I feel all motherly towards her and would like to >fatten her up for Xmas. lol.... I really dont' know her..or any of these girls for that matter. These were just images given to me to play around with. I don't mind scrolling down, but I wanted to eliminate the sideways scrolling. I'm thinking that people with small screen should still be able to see the site pretty well....you think? How would you design/place the background image? > >dorayme wrote: > [quoted text clipped - 15 lines] > > How would you design/place the background image? Beauregard is right. There is no question of where to place this. You can't design like this! Look what happens when you Ctrl +: The undernourished girl goes into the black. Perhaps she is searching for food? Plus the girl at top on the right in the designer jeans and white jacket is going to fall off... Honestly, I cannot conceive of a fix for all this. Have you gone over some of the material at: http://www.htmldog.com/guides/ ? Generally follow the advice there except use HTML 4.01 Strict as your doctype and adjust accordingly. Make a background and fancy look to your page the *very last thing* you do, not the first. Signaturedorayme >> My goal is to have a centered page with no scroll bar for up and down >> movement or left and right. > > That would surely be unwise? Have you got something against people > with small screens or who prefer not to use the height of theirs? Layne, look at your site with Opera and press Shift-F11. Or with Firefox and the Web Developer Toolbar installed: Miscellaneous > Small Screen Rendering Your page is useless, I'm afraid... Signature-bts -Friends don't let friends drive Vista >Or with Firefox and the Web Developer Toolbar installed: >Miscellaneous > Small Screen Rendering > >Your page is useless, I'm afraid... Okay....I just installed Web Developer Toolbar and hit Misc > Small Screen Rendering... What does this mean? How can I fix this if it matters? > >Or with Firefox and the Web Developer Toolbar installed: > >Miscellaneous > Small Screen Rendering [quoted text clipped - 7 lines] > > How can I fix this if it matters? Apart from any fancy device to help you see what other users are seeing, you can use your own eyes and fingers. Just alter your own browser width and use the text-size controls to see what happens. Just remember that not everyone is seeing things at the text and window sizes you are seeing. Signaturedorayme >Apart from any fancy device to help you see what other users are >seeing, you can use your own eyes and fingers. Just alter your >own browser width and use the text-size controls to see what >happens. Just remember that not everyone is seeing things at the >text and window sizes you are seeing. Okay... I see what you're saying. Even though I'm new...my problem isn't with positioning...(anymore) My problem is knowing how to properly display a background or how to display a background image that I've designed in Photoshop. This is where advice would greatly help. I just experimented with resizing everything. I got rid of all of my images and text and had just the blue rectangular background. And I tried resizing by hitting Ctrl +... and nothing happened. I'm thinking that this is what's effecting my entire design - the unflexibility of my background. Basically....how do you design a background graphic in photoshop and display it properly as a background in CSS so resizing won't be a problem? > My problem is knowing how to properly display a background or how to > display > a background image that I've designed in Photoshop. This is where advice > would greatly help. A background should be exactly that, a background. Something that covers the canvas and over which you place your content. You don't have a background. You have a big blue box containing some "content" (the words on that image). That "content", apart from the fact that it should be text, and not a picture of text, should be real content, not part of something that is assigned as a background. As soon as you start putting your "content" in a background image you are forced to try and position your other content in relation to that "content". This invaribly fails. One major reason it fails is that by default background images do not print (to save ink) so any "content" in the background image will not print. Another major reason it fails (in this case) is that the google bot does not read "content" in images. That "content" is invisible to google. By the way the picture of the pretty girl is way too big. If you use some proper image manipulation software you could compress it from the 163K it is now down to something like 20K. Same with the other images. The entire page is almost 300K. Way too big for what it is. Oh, and *don't* use letter-spacing to space those two mirror images. SignatureRichard. >You don't have a background. You have a big blue box containing some >"content" (the words on that image). That "content", apart from the fact >that it should be text, and not a picture of text, should be real content, >not part of something that is assigned as a background. So what would be the best method to produce a blue box and have it a part of a background? Should I even specify it as an image? >By the way the picture of the pretty girl is way too big. If you use some >proper image manipulation software you could compress it from the 163K it is >now down to something like 20K. Same with the other images. The entire page >is almost 300K. Way too big for what it is. Still working on the optimization. >Oh, and *don't* use letter-spacing to space those two mirror images. Understood...just thought it would be witty. >>You don't have a background. You have a big blue box containing some >>"content" (the words on that image). > So what would be the best method to produce a blue box and have it a part > of > a background? Should I even specify it as an image? body {background-color: blue;} ? >>By the way the picture of the pretty girl is way too big. If you use some >>proper image manipulation software you could compress it from the 163K it [quoted text clipped - 4 lines] > > Still working on the optimization. You don't need to "work" on it :-) Open picture. Set compression level to, say, 50%. Save picture. SignatureRichard. > > Still working on the optimization. > [quoted text clipped - 3 lines] > Set compression level to, say, 50%. > Save picture. Perhaps he meant other things by optimization besides byte juggling. Lie making the text bigger or getting rid of it. But in case OP does mean byte reduction, you do not quite need to go down to 50%. Here it is at 80% jpged and under 10KB: http://netweaver.com.au/alt/pics/background_less_bytes.jpg Signaturedorayme >body {background-color: blue;} ? The background color is already specified as black. I'm looking for a blue image inside of a black image and all of it is considered a background. >Open picture. >Set compression level to, say, 50%. >Save picture. Dorayme is right...I am talking about bytes. But anyhow I'll get every image fixed to make for a faster download. >>>You don't have a background. You have a big blue box containing some Okay... Can anyone explain to me why this worked...? <html> <head> <style type="text/css"> body { background-repeat: no-repeat; background-position: 180px; } </style> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/Background.gif"> </body> </html> Actually, it didnt' work very well. When I resize the text on my page the page starts to break up. I'm using a combination of absolute and relative positioning which I've been told is okay to do. Also when I resize the images, the background still remains at a fixed size. Still trying to find a solution to this. I've been told that the correct way to display a background is by: body {background:#fff url(images/picture.jpg) no-repeat center center} This info is coming from guys who are good at design. So I still don't understand why it's not working for me. You can click on this link to see the updates thus far. www.ibtestsite.info Oh yeah... How is this guy (http://portfolio.dreamshock.com/grimshaws/) getting his background's displayed/positioned properly or designed without using Photoshop? His background is resizing nicely with all of his text and images resizing proportionately as well. > Oh yeah... > > How is this guy (http://portfolio.dreamshock.com/grimshaws/) getting his > background's displayed/positioned properly or designed without using > Photoshop? His background is resizing nicely with all of his text and images > resizing proportionately as well. Are you seeing what everyone else can see? There is no resizing of any background image because there are no bg images. Turn off all the styles and you will still see the images. <td rowspan="4"> <a href="Grimshaws_Vauxhall_Flash.html"><img src="images/frontsplash_07.jpg" border="0" height="179" width="205"></a></td> is just normal images in the html. This one is in a link and in tables, that's all. Have you tried following the advice I gave you earlier at all: "[no] fix for all this. [go] over some of the material at: http://www.htmldog.com/guides/ Generally follow the advice there except use HTML 4.01 Strict as your doctype and adjust accordingly. Make a background and fancy look to your page the *very last thing* you do, not the first." ? Signaturedorayme >Are you seeing what everyone else can see? There is no resizing >of any background image because there are no bg images. Turn off >all the styles and you will still see the images. I turned off all of the styles and I saw the images. I hit view source and I saw that he does specify a bg image: <body bgcolor="#FFFFFF" text="#000000" background="images/pagebackground.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> >Have you tried following the advice I gave you earlier at all: > [quoted text clipped - 6 lines] >Make a background and fancy look to your page the *very last >thing* you do, not the first." Thanks again. I will visit the site and review the html/css rules...actually before I do anything else with design. Thanks for your expertise. > >Are you seeing what everyone else can see? There is no resizing > >of any background image because there are no bg images. Turn off [quoted text clipped - 5 lines] > <body bgcolor="#FFFFFF" text="#000000" background="images/pagebackground.gif" > leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> You said to look at: http://portfolio.dreamshock.com/grimshaws/ I went to it and in the source it says: <BODY BGCOLOR=#FFFFFF> not <body bgcolor="#FFFFFF" text="#000000" background="images/pagebackground.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> In this site's css it has the following bullshit: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; scrollbar-face-color:#4B4B4B; scrollbar-highlight-color:#D4D4D4; scrollbar-3dlight-color:#373737; scrollbar-darkshadow-color:#000000; scrollbar-shadow-color:#808080; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#E0E0E0; } There is no bg image there either. Got to rush now and wrap more presents and stuff and get ready to get blind rotten drunk, to disgrace myself more than for the rest of the year combined and like that... Merry Xmas mate! Signaturedorayme > Actually, it didnt' work very well. > [quoted text clipped - 15 lines] > > www.ibtestsite.info Please quote what you are referring to. Many cannot see what any of the context is at all. Not everyone uses Google Groups, especially in this ng. Please try harder to say what it is you actually want as a final result. What should and should not happen. At the moment it simply looks like you are vaguely dissatisfied at undernourished girls wandering out of blue areas, vaguely not understanding what a background is, not understanding how an html rectangle might grow or not grow and so on. Is it the blue area that you want to grow along with the text size increases so that everything and everyone stays indoors and not go into the frightening black nothingness? There is a general rule about this stuff. If you are at the beginner stage in these matters, don't even think of using any positioning, especially not absolute positioning. Earlier in the thread you said: "Even though I'm new...my problem isn't with positioning...(anymore) My problem is knowing how to properly display a background or how to displaya background image that I've designed in Photoshop. This is where advice would greatly help." But you are displaying a background image. It does display! So what are you wanting? You are needing to ditch all the positioning, to say what you want to happen, to rub more and better words together. Signaturedorayme > And I tried resizing by hitting Ctrl +... and nothing happened. Nothing happened because you have no text, only images. (I assume the Ctrl+ was in Firefox; that just resizes text.) Signature-bts -Motorcycles defy gravity; cars just suck > >Apart from any fancy device to help you see what other users are > >seeing, you can use your own eyes and fingers. Just alter your [quoted text clipped - 21 lines] > Basically....how do you design a background graphic in photoshop and display > it properly as a background in CSS so resizing won't be a problem? Well, my point about Ctrl + was simply to see what happened in your previous design. I described what happened. However, you need some text or inline images before "something happens" Why with inline images but no actual text? Well, I guess because they are in a line that *could* share text. The text could be big or small depending. The invisible line blocks are sized according to the biggest of any inline objects. The browser just makes provision. If the text size is 100%, then pictures that are taller than such normal text will make the line box taller. But at some enlargement of the text (or potential text) the line box will be taller than the pics. The text size is sized according to what the author says it should normally be or as it is overridden by the user wanting it bigger or smaller. You can see for yourself. Get rid of all your images bar one in the previous url you provided. Put: <div class="linkbkgd" style="background: white;"> <img src="images/Link-Background.gif" alt=""> </div> And watch the action. The space under the image is for the descenders in text. As for displaying bg images, that is simple enough. Read the htmldog link I gave. Read what rf says. You may be thinking you can stretch a bg image or make it grow with the growth in an element (as happens in text size adjustments). But you can't. You can give an illusion by having a bg repeat itself, or you can have one so big that some of it (though not all) will practically fill the element. Signaturedorayme >>Or with Firefox and the Web Developer Toolbar installed: >>Miscellaneous > Small Screen Rendering [quoted text clipped - 5 lines] > > What does this mean? It means your page is useless for anyone using small-screen browsers (mobile phones, PDAs), or where CSS is not available. People on slow connections who disable image loading don't see anything at all. The page also looks pretty silly on my 1680x1050 widescreen with maximized browser window (though I personally rarely do that). > How can I fix this if it matters? Start over? Get some content (you don't have any), properly mark it up, then worry about design and layout last. Try this browser, too: http://offbyone.com/ Signature-bts -Motorcycles defy gravity; cars just suck |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.