Found an interesting and new (I think) way to use portions of one image...kinda of like a sprite.
Permalink 1 user found helpful
I was creating a header for a form on a Concrete5 site today and decided to play around some with image that I was using as a background to a heading DIV.
Normally, when using sprites, one would split the image up and refer to it in pieces (which while nice is kinda of a pain positioning wise).
The way I stumbled upon is a bit different.
Unlike with sprites, my new (this may not be new but I have never seen it before) method, can use a whole image as is without relying on it's various pieces to be placed together in one bigger sprite "image".
Through a combination of background position AND width CSS I can bring into focus in the background of a DIV the look that I need to have.
I have only tested this on a horizontal image used as a background to a DIV.
For example...here is some sample CSS (ignore the #bcf5):
And here is the code that the above CSS affects...
The above CSS causes the image (which is 500 pixels wide and rounded at the upper corners along with a gradient in the middle) to appear as shortened (given the less than 500 pixel width of the form I am using it with).
The .fieldset_heading CSS class shows the image to the left but only 90% of it.
The span inside the .field_heading shows it as 110% the image width allowing the right rounded corner to then appear in place of the 10% reduction made by the .fieldset_heading class.
I am not entirely sure as to why this works exactly but it works in Google Chromium, Google Chrome, Firefox, and IE going back to 7.0.
The advantage to this method is that I don't have to split the heading background image up as C5 does when rendering the nice, rounded, section headings in the dashboard.
Any thoughts on this?
I can add more details if anyone is interested.
Carlos
Normally, when using sprites, one would split the image up and refer to it in pieces (which while nice is kinda of a pain positioning wise).
The way I stumbled upon is a bit different.
Unlike with sprites, my new (this may not be new but I have never seen it before) method, can use a whole image as is without relying on it's various pieces to be placed together in one bigger sprite "image".
Through a combination of background position AND width CSS I can bring into focus in the background of a DIV the look that I need to have.
I have only tested this on a horizontal image used as a background to a DIV.
For example...here is some sample CSS (ignore the #bcf5):
#bc5f .fieldset_heading { background: url(/themes/custom_theme/images/mini-header.png) no-repeat; background-position: 0px 0px; height: 31px; width: 90%; } #bc5f .fieldset_heading span { display: block; background: url(/themes/custom_theme/images/mini-header.png) no-repeat; background-position: -80px 0px; width: 110%; height: 31px; }
And here is the code that the above CSS affects...
<form action="<?php echo $this->action('submit_form')?>" method="post"> <div class="fieldset_heading"> <span>Your Information</span> </div> ... etc. </form>
The above CSS causes the image (which is 500 pixels wide and rounded at the upper corners along with a gradient in the middle) to appear as shortened (given the less than 500 pixel width of the form I am using it with).
The .fieldset_heading CSS class shows the image to the left but only 90% of it.
The span inside the .field_heading shows it as 110% the image width allowing the right rounded corner to then appear in place of the 10% reduction made by the .fieldset_heading class.
I am not entirely sure as to why this works exactly but it works in Google Chromium, Google Chrome, Firefox, and IE going back to 7.0.
The advantage to this method is that I don't have to split the heading background image up as C5 does when rendering the nice, rounded, section headings in the dashboard.
Any thoughts on this?
I can add more details if anyone is interested.
Carlos
It's similar but not exactly alike. The sliding doors technique uses two images.
The one I stumbled upon uses only one image. No need to cut it in half and make two.
Admittedly the sliding doors technique may work better with respect to slicing up the one image and using certain parts to save on image size but what I was after was reducing the HTTP requests from two (for the image slices used in such techniques) to one more like using a sprite (which is one image having lots of images within it that are accessed by varying the background-position property of the sprite image).
Doing it the sprite way just seemed like too much hassle.
Now I use just the one image (a rounded top corners, gradient colored, header) used as a background to a div at the top of my site forms.
One HTTP request. Same image.
I just change the background-position and width CSS selectors slightly to achieve the same sort of thing the sliding doors technique uses but with one less HTTP request which is nice I think.
Attached is an image with the header in use at one of my sites (there are two forms on the page...the one header says "User Login" the other says "Forgot Your Password?").
Carlos
The one I stumbled upon uses only one image. No need to cut it in half and make two.
Admittedly the sliding doors technique may work better with respect to slicing up the one image and using certain parts to save on image size but what I was after was reducing the HTTP requests from two (for the image slices used in such techniques) to one more like using a sprite (which is one image having lots of images within it that are accessed by varying the background-position property of the sprite image).
Doing it the sprite way just seemed like too much hassle.
Now I use just the one image (a rounded top corners, gradient colored, header) used as a background to a div at the top of my site forms.
One HTTP request. Same image.
I just change the background-position and width CSS selectors slightly to achieve the same sort of thing the sliding doors technique uses but with one less HTTP request which is nice I think.
Attached is an image with the header in use at one of my sites (there are two forms on the page...the one header says "User Login" the other says "Forgot Your Password?").
Carlos
Interesting. Nice tip. Thanks for sharing.
My pleasure Riotaj.
I mean the technique I accidentally discovered is no big deal really (well...other than the fact that it's not exactly intuitive and readily discovered I guess LOL) but it does make my job working with background images on DIV's a bit easier I think.
I'll use it and see it pans out to be usable in a multitude of situations.
Thanks again for your input.
Carlos
I mean the technique I accidentally discovered is no big deal really (well...other than the fact that it's not exactly intuitive and readily discovered I guess LOL) but it does make my job working with background images on DIV's a bit easier I think.
I'll use it and see it pans out to be usable in a multitude of situations.
Thanks again for your input.
Carlos
http://www.alistapart.com/articles/slidingdoors/...