It’s been a while since some issue piqued my CSS curio, and certainly a while since it was somehting based on sucha simple property but i was wondering about pixel alignment of background images.
I know the answer to my query may be “you just cant do that THAT WAY with CSS” but I thought i would run it by the forum in case someone has devised a clever method around this, other than what I clumsily do.
So the answer CANNOT RELY ON:
- Altering the image in an image editor
- Using content images/or AP’ed pseudo elements
How can you position a bg image at some %width in an element so that the EDGE matches the % width.
I think the creators of CSS where thinking of images being placed only at 3 node points: left, center and right. Where the left means the left edge of the image on the left side of the element, right means the right edge of the image on the right side and middle means the middle of the image on the middle of the container ( which, aesthetically is actually a good solution for those 3 specific points ). The clever algorithm for this is: x= (var=%)width of container- (var=%)width of image.
left: x= (0%)width of containiner- (0%)width of image=0%
middle: x= (50%)width of container- (50%)width of image=(example) 1000*.5 -200*.5= 400px
right: x= (100%)width of container- (100%)width of image=(example) 10001 -2001= 800px;
where x is the position of the LEFT edge of the image.
The downfall of this is that if I wanted to place an image at 20% width of the container ( meaning the LEFT edge of the image is at the 20% mark… i cant)
right: x= (20%)width of container- (20%)width of image= 1000*.2 -200*.2= 160px; ( but I wanted it at 200px!)
One work around is to ADJUST the size of the image , adding transparent areas on either side so that the leftmost opaque pixels fall where desired.
This however is bothersome because:
- it forces your hand int of a file format which allows for transparency ( I suppose this is not necessarily true if you have a solid color bg, but generally it is)
- if your image is TALL and too complex to be chopped as a simple vertical repeating pattern, the additional area will bloat up the file size.
- one would need to create different images for different %s
- the image cant be reused elsewhere on the page
this is all just BAD!!!
the other workaround I use is o either place the image in the markup, use it as a pseudo element of the container or as the bg of the pseudo element and then use AP to place the pseudo element and Z-index: -1 to send it backwards .
This works fine but it uses up a valuable pseudo element, and requires I RP all the other children of the container element to make sure they appear in front of the pseud element so it feels kinda clumsy.
again I was wondering if anyone had figured a ‘better practice’ for dealing with this issue or if CSS3 had any obscure but promising new properties for aligning bgs