I am experienced at creating advanced CSS sprites by hand, but I now find myself wondering if it's possible to have one image of vertically repeating background as well as a second image of horizontally repeating (different) background, contained in the same sprite?
It would seem logically impossible, if both images have to truly repeat, I mean think about it, you cannot specify a cropped area for the repeat, so they each would expand the image to where the vertical graphic would appear in the horizontal background and visa-versa.
But I just wanted to make sure I am not missing out on some kind of trick that I am not aware of - thanks for any suggestions or examples to explore.
If you are not certain what I am describing, draw a horizontal line across a paper and now draw a tall vertical line elsewhere on the paper. Now imagine one image repeating across the horizontal and a different image repeating down the vertical. Now try to imagine a sprite that could hold both images and the css rules each would use. It's not possible based on what I have learned but maybe there is a trick I don't know.
Short answer: not possible. :)
What I always do in your case:
Use two:
for vertical repeats
for horizontal repeats
Related
I understand that some people argue that aligning text to baseline grid isn’t necessary in web design. However, it’s intriguing to do that, and besides, the result looks slick. So, I’m pushing this forward.
Now, I have two sets of text with different font-size and line-height and I’m trying to vertically align them based on baseline grid. My questions are:
Take a look at my pictures below (“Modified” and “Oct 3, 2017”). How do you typically align them? Vertically centered based on their line-height, or align them based on their baseline? In my pictures, I took the first option. This first question is probably more about the UX, what is the “best practice” here?
Is it possible to exactly align the texts based on their baselines in CSS? What is the best and simplest way to achieve that?
I’m also adding divider lines to create a kind of list. How do you typically create them in CSS and keep them in sync with the baseline? By using border property, or else?
Attached are pictures to explain my concept. FYI, I’m a budding designer who can’t code. :p Thank you very much for your future insights.
Picture 1
Picture 2
Picture 3
I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://www.spabc.com/drupal/ now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width of 95%, I can't really keep things aligned. I'd also like to keep the logo nicely aligned with the image i.e. where it hangs over titleimg, I want to keep the room that it hangs over = to the distance on the right side to the border of the titleimg. I tried to depict what I mean here: The distances depicted with red lines should stay equal. How do I do this?
You will need to adjust the styles for check-rates_btn and titleimg accordingly using CSS Media Queries.
Unfortunately, you are using Drupal and have too many cached CSS files for me to look through, but the ones I did look at (layout.css and system.theme.css) only had a few specific media queries that were not altering these classes.
Hope this helps.
I am using Sprite image for my project. Which one should we have to follow horizontal or vertical? I meant to say adding side by side(occupies more width ) or one bye one(occupies more height).
Is there any width/height limitation for adding images in sprite? Is there any loading concept included?
It doesnt matter if you use horizontal or vertical ones. Just dont make them too big. Mostly 1500x1500 is enought for one sprite - then change to another.
If you think about mobiles then try to not make sprites bigger than around 800x800.
For image type i would suggest png (if have full colors and transparency) if you use some popular graphic editors option to ,,save for web'' it will be even smaller that way.
Sprites are mostly used for lowering httprequests for images - if you use many small images its always good way to store them in one bigger (just dont forget to set cache headers) so all browsers will try to cache them (and mobiles at least for the session).
According to this article it depends.
One aspect to consider is how much memory the decoded sprite map image will use consume. Here's are guidelines for whether horizontal stacking or vertical stacking will be more optimal:
For all images in the sprite, find the width of the widest image and
the height of the tallest image.
If the largest width is greater than the largest height, then a
horizontal stacking will result in a more optimal sprite sheet.
Otherwise, vertical stacking is more optimal.
It then goes on to show examples of the same images in either a vertical or horizontal sprite along with their file sizes which is quite a surprising. It suggests using Google Chrome's Developer Tools "Native Memory Profiler".
Vertical Sprite
Horizontal Sprite
In this case the horizontal sprite is best.
I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom).
I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for.
So am using 3 div's to have the background image display, the only problem is depending on the length of the content, the bottom background image does not align nicely and make the box appear seamless, due to the repeated middle image being cut off prior to the point where the border merges.
I have used a brush in photoshop to create the jagged container. I have had a nose around about this but can not find a solution to fit.
The solution is to set a specific increase of height increment for your content area. This can be done in a couple of ways:
If your content is mostly text, you can set your line-height and/or the height of any other used elements to be the desired increment (or a multiple thereof) and hope for the best.
If this will not work, the only other way would be to use JavaScript.
Here are a couple discussions of this very challenge, including some thoughts on using line height and some starts at workable JavaScript code:
http://doctype.com/any-way-increase-hieght-div-specific-increment
http://www.dynamicdrive.com/forums/showthread.php?t=64034
I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.
My problem is the image which will be used as background. I am thinking about following issues:
What should be image size?
how will it repeat when browser window size is very large? for big 27" monitors out there?
Can somebody guide me on these points?
Regards
Vikram
That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.
There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.
The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.