Adding background image based on screen width

css with screen resolutions

[patxiworks]

Hi,
I just registered on WebmasterWorld because I discovered that most of my problems ended whenever Google gave me a link to this forum.

I'd like to place a background on the body of my page and set it to stay in a fixed position like so:

body {background: url(images/crest.jpg) 0px 217px no-repeat}

But my problem is that I'm working with a fixed resolution and when I realised this, I tried another resolution. That was when I discovered that I'd have to find a solution to work for all possible resolutions!

Any ideas from anyone please?

[doodlebee]

There's sevral possibilities. I'm guessing the site is fluid in width, so you need the image to resize as the page gets bigger?

Is this image just a certain width, or it is a height as well? Does it need to encomapss 100% of the background, ir is it only a small strip of image that needs to stay in one place?

If it's a small strip that needs to stay in one place, you can make the image tile. Open up your graphics program and play around with the image - mine (and I think most do) have an option to change your image into something that has seamless tiling. This works well.

Or, if you need to to resize upon browser window resize, there's a way to do it via CSS - howveer you'll have to play with the CSS since this is typically for an image that will take up 100% of your background.

[cssplay.co.uk ]

Hopefully that'll get you started.

[patxiworks]

Thanks for the link.

I'm not sure it would solve my problem but I think it will give me more options.

Actually, I have a div at the center of my page(width: 760px) which has all the page content; and this div has a background which is aligned to the right so that it is 'cut' in half. The effect I want is to have a kind of overlap of the image - the other half of it overflowing onto the main page body (which is the body background image - not 100%) so that both seem to form one image that looks like it cuts across the body and the central div.

I'm not sure whether you understand what I'm trying to explain. Oh well! thanks anyway.

[doodlebee]

Oh...I think I see what you mean. It's like a background image that's in the base of the page (literally in the background) - but you have a fixed-width layout that you want to overlay the background...

I actually did this with one of my sites. I have a fixed with, centered layout (760px wide), and the background is striped - *but* between the striped background and the content, I have a div that's so wide, to make it look like a bright light is shining behind the content area. (Content overlaps the background image - and it all gets centered together.)

I'd link to it, but you can't do that here - let me know if you want to see it to know what I mean.

Anyway, basically what I did for that was have a secondary outer wrapping div - and it's background was set as the "bright light" image. Then, inside that div, I placed my wrapping content div with my layout in it. I set the outer wrapper to "background-repeat:no-repeat" and centered everything. Worked like a charm.

I hope I made sense there!

[patxiworks]

Yes, I'd really like to see what you did on your site. Couldn't you give me the link just as you did for [cssplay.co.uk...]

If anything, I could get some hints from what you did.

Thanks.