Jump to content

Corner image backgrounds


MacRankin

Recommended Posts

Just wanted to share with you this piece of code for anchoring an image in both the bottom left-hand side and top right-hand side of the viewport or browser window...

 

html {

margin: 0;

position: relative;

background: #000 url(images/floral_top.jpg) no-repeat top right;

}

 

 

body {

margin: 0 auto;

font-size: small;

position: relative;

background: url(images/floral_base.jpg) no-repeat bottom left;

}

 

Simple, isn't it. Of course, I've done something similar in the past in creating 2 and even the appearance of 3 background colors, but that was to create the illusion of a 3-column layout.

 

 

Just a little web page I'm designing for someone. (narrow view)

narrowview_01.jpg

 

And a widened image of the same layout and backgrounds...

wideview_01.jpg

Link to comment
Share on other sites

Yes, of course you can, and anyone else, for that matter. :D

 

I really don't see the point in some peeps expecting the web community to seek their permission to use their tips and tricks, and only for use with personal or on non-commercially built sites. I mean, they should either share what they've found with others, charge a little something, or ask for a donation of appreciation.

 

I'm ok with any of those examples, as I myself have occasionally bought and donated monies for the odd dynamic code or two.

 

Incidentally, I replaced that horrible scrollbar with a scrolling javascript. I've just got to create a nicer set of arrow graphics for it. I also, as it happens, incorporated Eric's opacity trickery thingy, which I pinched from his website, here.. :lol:

 

http://www.visibilityinherit.com/code/css-opacity.php

 

Without tips, tricks, and other cool tool treasure chests like his we wouldn't be able to share anything. ;)

Link to comment
Share on other sites

I've put together a little web page, so that you, and anyone else can play around with it.

 

Funnily enough, this background image trickery thingy seems to work in every browser I've got, though I am having a few probs with it in IE6, though that's probably down to the suckerfish nav I'm using. Then again, I guess as long as you're not trying to create solutions for everything you can't do, as I do from time to time, then I guess there's bound to be some quirks appearing every now and then.

 

Anyway, about that page...

http://www.macrankin.co.uk/web_filez/background_prep.html

 

Btw, The background graphic(s) -- originally one, though bought by me, are not mine to give away, so you'll have to use your own. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...