Jump to content

Recommended Posts

Hi, i have found a site with a bg image i really like.

I want to use a modified version of it. But how does he ensure that if the user viewing the site is on a different monitor like a wide screen it fills the whole page.

i know that to ensure a background image looks good on all monitors you should fade out the side to a solid colour, and then use a background-color that matches it.

But the image uses a sky and green grass, so i cant use one background color that will match both the sky and grass.

Deary me im terrible at explaining, so i have added an image with details to show you.

Here is the site

http://reservoir34.com/goodies.php#

 

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/187819-need-help-using-a-background-image/
Share on other sites

There is no way to scratch a background, other then using flash as far as i know.

 

The best method, would be to use additional divisions, combined with z-index and absolute positioning.  You simply cut out the individual elements from the image, I.e. The skies, and then position them on the top of the background using z-index. The images will still be pixel-based obviously, but it will support a much wider range of resolutions, before the skies/images start to get to small.

 

I suggest you use css spirites if you feel motivated to speed up the site further, which would be very much desirable with sites making heavier use of images then normally.

 

Check http://perleporten.dk/ for a basic idea of how to place the skies. You need to create the skies yourself, using Paint.NET. Simply generate clouds, mark up a desirable form with the selection tool, and blur the selection to create some realistic looking skies.

Hi & thanks for taking the time to explain to me in depth.

I will do as you suggested, it seems to me that the link i posted to you, they have just used a massive image width wides, im aware of problems that come with that, But am i right?

is this site using a massive width wise image?

 

 

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.