/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Multiple Images & Background Image Absolutely Positioned?

Let me start with, I am new to any type of website design. Given that I am trying to attempt the following and am having some issues which seem to be easy to solve if I knew what I were doing. Use the following picture for reference:
[IMG]http://i261.photobucket.com/albums/ii64/playa4real1/for%20sale/example.jpg[/IMG]

I would like to create a simple website of just 1 page with something similar to the above.

The picture above would be the background image and the red and blue blocks would also be different (each is different) images. I want the red and blue blocks to appear in the exact position over the background image every time. [the red and blue blocks will eventually be hyperlinked images] I have centered the background image easily, but I would like to keep it in the center of a full sized IE window (if the window is not full sized you should only be able to see a part of the image and not have the image keep centering itself) I then used the absolute positioning function for the rest of the images and began to line it up. This part is fine except for the facts that the background image keeps re-centering (which i do not want) and the absolute position is different on every computer (each person may have a different resolution setting and ppl have 16:9 vs 4:3 lcds). The goal here would be to open up the website on any computer and have the big image appear in the middle of the screen with the red and blue images appearing on top of the big image in those respective positions. I would prefer that if the screen was anything other than maximized the user would only be able to see a piece of the entire page as opposed to having it constantly centered.

Maybe I should use absolute positioning of the main image as opposed to setting it as the background image? If this is the case, how can I keep it in the center of everyone’s screen?

The concept seems really easy here; however I have spent way too much time without any luck trying to figure this out. Hence the reason, i’m coming to the gurus for help, any help would be appreciated. HTML or CSS should be fine. If you have any ideas, please help me out – the simpler the better! I do not need to get too complicated unless its necessary.

(sorry for the long and wordy post – if anything is unclear please let me know)

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@playa4real1authorFeb 13.2010 — anyone? ?
Copy linkTweet thisAlerts:
@savvykmsFeb 14.2010 — You could simply set the CSS background image properties for the <body> element to not tile and start at whatever offset you need. Then all you would need to do is make sure the widths/heights of all the layout elements on the page are fixed. This will keep the layout elements in fixed positions above the background image.
Copy linkTweet thisAlerts:
@playa4real1authorFeb 21.2010 — Thanks savvy.

Instead of adding the image as a background, I just placed it as another image on the page.
×

Success!

Help @playa4real1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...