First ill show the pic otherwise what i am saying wont make any sence. I want to add a picture on the left and right of my site i have screen shot it and put (PIC HERE) to show what i mean i dont even know what that part of my site is called any help would be great thanks.
One image covering all that blue space? That would be a background. Try this: <body background="FILENAME">
I have entered the code like this but now i am just getting a white backround color and no image .. What am i doing worng? } .font0099ffbold { color: #000000; font-weight: bold; } .fontWhiteStyle {color: #FFFFFF} body { <body background="http://i103.photobucket.com/albums/m156/BILLDOGIN1/S7300164.jpg"> } --> </style> </head>
oh. i dont think you want to use that image as a background. i guess you want two different images at two sides of the page (the blue area, let's call it left panel and right panel respectively).
Aaaaaack nooooooo. The advice given you was apparently assuming you didn't have any CSS, but you do, so at the very least you need this: .fontWhiteStyle {color: #FFFFFF} body { background-image: url(http://i103.photobucket.com/albums/m156/BILLDOGIN1/S7300164.jpg); } </style> Code (markup): That will by default set the image, whatever its size, starting at the top left corner of its container (the body) and will tile (repeat) to its heart's content. If you want to position it and not repeat it, as well as set a background colour, you could do this instead: body { background: #fff url(nameofimage.jpg) 0 0 no-repeat; } If the image can't be found by the browser then just the white background will show. Better than referencing a file on photobucket, have a copy on your own server (or whatever server the HTML is on) and then you can just reference it by it's name and not some whole other website whose speed I'm not real fond of (s l o w).
that didnt work that took the picture and put it as the full backround and tottaly rearranged my page hehe
That's what it does, yes. It fills the background with the image. Is that white part centered using margin: 0 auto? If the left side and the right side are supposed to be two different images, and always seen, then you've got a bit of a problem. You might want to take amazingronit's advice, by making actual containers for those images. The problem is that then the whole site is much wider. The blue part in your image does not show when the browser screen is smaller, right? If the white part is being auto-centered, then the dog (I've now actually looked at the image) will not always be visible depending on the width of the browser window. So if you took amazingronit's advice, you could do something like this: For the body, take the image, don't repeat it, and instead of using 0 0 to position it, set it to right top. Using those words or 100% 0 if you want numbers. This will put one copy of Dog on the right side. If a browser is wide enough to make the page look like in your image, there will be one dog on the right. To get a dog on the left, you'd have to make another container in your html. Call it "dogcontainer" if you want. Make it contain the entire web page, so it's just inside the body tags... <body> <dogcontainer> <rest of page...> </rest of page...> </dogcontainer> </body> etc... the above is pseudo-code, to illustrate a point. Don't copy it exactly : ) That container will be set to a height and width of 100% like the body is already, and the white part of the page stays centered (you've got it centered to its parent, the body... but now we'll have it centered to its parent, the dogcontainer). Give dogcontainer a background, and set it to 0 0 (or left top if you want) and no-repeat. Only when a webpage is the size you've shown in your graphic will the two dogs perfectly fill the space on either side. The only other solution I can think of then if you must have that is to set a large width, and have two containers (possible floated to the left and right), each with a dog, and the middle part with no set width, just side margins to make room for the floats. This will force a scrollbar on any browser window that's not as wide as your whole site, which you might not want (but if you don't care, then this could be the better solution for you).
thats a lot for me to take in hehe but i am gonna try that out thanks for your help. Note: the dog picture i am just using as a test of what i will be puting there
Will it be something that's necessary for the site? Putting an image on the body while the bulk of the site is smaller means that only those of us with big screens will see it. I thought this was filler image because you didn't like the blank empty parts : ) If these things on the sides are part of the site, then you will need to make your site physically bigger. Instead of doing what I said above, you'd better just stick everything inside the white part and make the white part bigger (wider). You could do something like this (but it depends on what's going in there): Again, pseudocode, not real code: <body> <mainwhitepart> <dogleft> <dogright> <restofthesite...> </mainwhitepart> </body> The dogleft and dogright would be boxes (divs) and one floated left, the other floated right. they would stay on the sides of mainwhitepart, since that's their parent. Mainwhitepart would then need to be set wide enough to accomodate the new content. The stuff inside mainwhitecontent will stay in between the left and right dog so long as there's side margins. If there's a footer (I forget if there was), it will need to clear those floats.