Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 12
Posts: 12   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 7331 times and has 11 replies Next Thread
Male neilkerry
Stranger
Member's Avatar


Joined: Mar 31, 2006
Post Count: 19
Status: Offline
Reply to this Post  Reply with Quote 
smile Background images on the left and right hand side??

Does any body know how to get a background image to hug the left and right hand side of a web page?

I have a static site that is centred and I would like to fill the white space to the left and right with a CSS styled type of background down each side. The site it is on is www.dpswebdesign.com so you can get an idea of what i mean.

Any help would be greatly appreciated as am very stuck - I think where I fall down is the terminology!!

Cheers again...

[Feb 22, 2008 7:34:30 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male neilkerry
Stranger
Member's Avatar


Joined: Mar 31, 2006
Post Count: 19
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

(bit more info just in case)

I know how to style with css to get whatever image i need to repeat, i just dont know how to get it to 'hug'

as it stands the site is made in dreamweaver using the layout mode, I have a 650px wide layout centred in the page
[Feb 22, 2008 7:36:35 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Female lm
Advanced Member
Member's Avatar


Joined: Oct 27, 2004
Post Count: 2550
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

do you have an example of what you call "hugging"?

If this is a pattern on both sides of the wrapper, you can set a background image to the body selector with the gap in a center ( with the width of your wrapper) and repeat it (y).
Otherwise you will need some extra wrappers to hold your image on both sides.

By the way i saw similar header with these moving clouds in this forum couple of days ago. Causing dizzines arent they.
----------------------------------------

My blog

----------------------------------------
[Edit 1 times, last edit by lm at Feb 22, 2008 8:47:33 AM]
[Feb 22, 2008 8:44:17 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male lwsimon
Advanced Member



US
Joined: Sep 24, 2007
Post Count: 396
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

For what its worth, I rather like the clean look you have now.

I would make a 1600x1px image and tile it vertically. Center it on the body, and it should be fine. If you want more than a solid color (diagonal lines or something, for instance,) change the height to whatever you need (20px?) and tile that. Also, I'd make the edges of the background a solid color and color the background of the body the same, so on the off chance someone with >1600 horizontal resolution visits your site, they won't see the edges of the background.
----------------------------------------
Simple is better.
[Feb 22, 2008 8:54:47 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male neilkerry
Stranger
Member's Avatar


Joined: Mar 31, 2006
Post Count: 19
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

yeh you probably did see another post with moving clouds on it - perhaps on a green background - well if so that was me also....lol!

For examples of hugging - no, the best I can describe is something I saw with ivy running down one side of the page, but that was simply a table aligned at 0 pixels from the left hand edge with css repeat going down.

What I was hoping to do was have a 75px wide repeat image butted up to the left and rhand edge of the window - the centre (clouds etc) at 650 would always be in the centre and these repeats would sit in thier locations whether it was an 800px wide or 1600px wide.

I take on board about the 1600px wide image repeat, but I was hoping for greyed out clouds that faded into white on each edge - see visual sample: http://www.dpswebdesign.com/sample_photoshopped.jpg

so going by the sample - if a user window is wider than is whats shown there would be more white space between the centre and side images - hopefully it gives you a better idea of what I am hoping to be able to do.

If not, I appreciate the comment about keeping it white space, I love it too, just want this site to look as good as possible...

Cheers,
----------------------------------------
[Edit 2 times, last edit by neilkerry at Feb 22, 2008 10:33:26 AM]
[Feb 22, 2008 9:35:40 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male teetwo
Newbie




Joined: Feb 16, 2008
Post Count: 31
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

This may be a silly idea but why not create a blank page do a screen grab of a section after you have a background you like and insert that left and right image in a 3 column table as an image. if you want movement create it as a animated gif file. Its easy to have ivy growing up a wall. depends on your creativity.

There again I do not do things normally so I guess that may not be the correct way but to the viewer the result works for me.

Terry
[Feb 26, 2008 2:34:37 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Female lm
Advanced Member
Member's Avatar


Joined: Oct 27, 2004
Post Count: 2550
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

tables plus animated gifs - you are not kidding, right?
----------------------------------------

My blog

[Feb 26, 2008 4:36:07 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male tpattison
Advanced Member
Member's Avatar

UK
Joined: Dec 29, 2004
Post Count: 1662
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

You could just put a background in the BODY via CSS:

body
{
background: #fff url(image.gif) repeat-y top left
}
----------------------------------------
Pavonis Mons | Listen of the week: "Residue of Desire" by Acumen
[Feb 26, 2008 8:45:14 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male teetwo
Newbie




Joined: Feb 16, 2008
Post Count: 31
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

I am glad it amused you it is a gift of mine. No I was not kidding, I am inexperianced with CSS and creating web pages.

I have just found that programing in Jave is simular to C which I do know, same as javascript.

I have just bought books on PHP, Css, and Msql. but I have not opened them as I am still working on a couple of utility programs I hope to sell. The reason for learning HTML etc.etc.

Programs obviously need help files installation systems and to me difficult but getting easier web sites.

I think I will have to put the programming aside and study Css for a bit.

No I was not kidding shows how new I am to this. Actually I did that on one site using animation shop. I gave away Flash and Swish as being two fancy. I have used Avisynth and Autohotkey in a interactive page once.

I agree the command is simple and I will take that on board. Have to read the book, starting to open it now....

Hmmm! I see, create a css profile and set the commands to control how a page and objects are displayed with formating only done once in the css file which can be associated with a page.

Thanks I should have read the book before posting. You are definately correct my comment was amusing I can see it now from your point of view.

You must realise I now have a mile of work modernising my sites.

Just shows you should read(look) before you leap.

I appreciate the heads up. Thanks again.

Terry
[Feb 26, 2008 11:40:50 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male Wickham
Advanced Member
Member's Avatar

UK
Joined: Sep 17, 2007
Post Count: 590
Status: Offline
Reply to this Post  Reply with Quote 
Re: Background images on the left and right hand side??

tpattison said You could just put a background in the BODY via CSS: but neilkerry wants three backgound images and I haven't managed to put more than one in the body style, so you need two more elements with background images.

If the side background images have a definite height the solution is easy by floating divs left and right with the images and a div height.

If the side background images have little height, say 1px, and are required to repeat for any window height it is more difficult.

I have made two examples where the side background images extend full height.

This example
http://www.wickham43.supanet.com/tutorial/background-image-several.html
works best where the main content has much less height than a normal window height but you require the side background images to extend to the window bottom below it, however high the window is.

The other example
http://www.wickham43.supanet.com/tutorial/background-image-several2.html
works best where the main content is always more than the normal window height but needs to be flexible in height (for text size increases or later editing) and drag side background images with small height down to the bottom of the main div, whatever height that is.

I haven't yet been able to combine the two examples so that side background images with very little height, say 1px, are repeated down to the window bottom and/or the div bottom when the main content div needs flexible height and may be less or more than the window height. It's very easy if something has a fixed height but not when everything has to have a flexible height.

Edit: I have now combined the two here:-
http://www.wickham43.supanet.com/tutorial/backgroundimageseveral.html
so that whether the main content is less or more than the window height the side background images will always extend to either the window bottom or the div bottom, whatever they may be, and be flexible in height. It's too complicated, there must be a better way, but getting background images to extend to various flexible heights is not easy.
----------------------------------------
Code downloaded to my PC will be deleted in due course.
WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768.
IE6 on W98 with 800*600.
----------------------------------------
[Edit 1 times, last edit by Wickham at Feb 27, 2008 4:25:45 AM]
[Feb 27, 2008 3:33:48 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 12   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread