/    Sign up×
Community /Pin to ProfileBookmark

Images Left and Right anchored to Browser borders…

Sup guys, this is my first post and i’ve searched around to try and figure out what I want to do but I can’t find anything.

What I was looking to do was have 2 images bordering my main div cell (located in the center of the page) so they can accentuate it and not make the bg look so boring. I proceeded to make a background image then realized I had forgotten about people with different resolution monitors won’t get the desired effect…only people on monitors lke mine w/ 1440×900 resolution, so I scrapped it.

Essentially, I want to do is to squeeze an image on the left and right of my main cell but keeping them anchored to the left and right borders of the browser window so resizing the window keeps them in the same position centered and anchored to the left/right borders. (Kinda like how vertical advertisement banners on some sites stick to the sides). This way, I’d get the effect that regardless of resolution my background maintained its shape.

Meanwhile I’d keep it w/ a shallow z-index so if the page is shrunk beyond the size of the images, they’d slide behind my main cell.

Can anyone offer any help on achieving this? I’m using Dreamweaver to make my page and it disallows me from creating any divs to the left or right of the main body block. If this isn’t possible, how about just getting the images to anchor to the left and right sides of my main cell?

Thanks

p.s. if you are having a hard time understanding what I mean, imagine a website with a red square in the center with a body of white text in it. The red square is on a black background but left and right of the red square are broadswords that are anchored in position so they’ll slide with the browser window as it is resized. Since bg is all black, it would appear as if regardless of resolution the background was maintained.
(alt: have the swords stay anchored on the left and right sides of the red square so regardless of resizing the window, the swords are always stuck to the sides and it wouldn’t matter how big the screen was made.)

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@CentauriApr 24.2008 — That is not that hard to do. If you lock the html and body elements to 100% height, then you can surround the whole site with another wrapper div that is set to min-height 100% (and it will naturally fill full width). The left sword could then be a background image on the body, whilst the right sword a right-aligned background to the wrapper div.
Copy linkTweet thisAlerts:
@SirRavenauthorApr 24.2008 — hmm very cool idea, I'll give it a try shortly, thanks for the input. I have just recently gotten back into web deving. I haven't done this sorta thing since good ole straight html into notepad, lol.

If anyone else has any suggestions, please feel free to add, it doesn't hurt having multiple workarounds for issues. Should also help me for future reference.
×

Success!

Help @SirRaven 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,
)...