need help with css sprites |
need help with css sprites |
falcon |
Apr 19 2017, 10:52 PM
Post
#1
|
Newbie Group: Members Posts: 17 Joined: 30-August 14 Member No.: 21,482 |
CSS Sprites-PageBreeze1
What I am trying to accomplish is: 1. convert pictures to sprites 2. have it display correctly for different screen sizes 3. have it display correctly for different browsers (note: IE is the worst) The website currently in tables because I could not get it to display correctly in CSS I believe I need "if IE then ..." to display correctly in CSS The CSS Sprites Generator: https://www.hscripts.com/tools/css-sprites-...rator/index.php The 16 image sprite "image_3699" it is stored in "Images" folder - - - Any help would be appreciated Let me know if more information is needed. If code is needed, let me know what code Thank You falcon The webpage: http://freetutorials.name/Reference1/PageB...creenshots.html The sprite image_3699 Pagebreeze image 3699 #image1 { background-image: url(./image_3699.png); background-position: -7px 0px; width: 969px; height: 616px; } #image2 { background-image: url(./image_3699.png); background-position: -6px -616px; width: 970px; height: 609px; } #image3 { background-image: url(./image_3699.png); background-position: -4px -1225px; width: 972px; height: 615px; } #image4 { background-image: url(./image_3699.png); background-position: -5px -1840px; width: 971px; height: 610px; } #image5 { background-image: url(./image_3699.png); background-position: -5px -2450px; width: 971px; height: 617px; } #image6 { background-image: url(./image_3699.png); background-position: -6px -3067px; width: 970px; height: 612px; } #image7 { background-image: url(./image_3699.png); background-position: -8px -3679px; width: 968px; height: 618px; } #image8 { background-image: url(./image_3699.png); background-position: -1px -4297px; width: 975px; height: 613px; } #image9 { background-image: url(./image_3699.png); background-position: -4px -4910px; width: 972px; height: 612px; } #image10 { background-image: url(./image_3699.png); background-position: -5px -5522px; width: 971px; height: 618px; } #image11 { background-image: url(./image_3699.png); background-position: -4px -6140px; width: 972px; height: 616px; } #image12 { background-image: url(./image_3699.png); background-position: -6px -6756px; width: 970px; height: 613px; } #image13 { background-image: url(./image_3699.png); background-position: 0px -7369px; width: 976px; height: 616px; } #image14 { background-image: url(./image_3699.png); background-position: 0px -7985px; width: 976px; height: 616px; } #image15 { background-image: url(./image_3699.png); background-position: -9px -8601px; width: 967px; height: 613px; } #image16 { background-image: url(./image_3699.png); background-position: -5px -9214px; width: 971px; height: 621px; } |
Darin McGrew |
Apr 20 2017, 12:19 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
If you use CSS sprites, then make sure the images in them are optional decorative images, and that the content is accessible without them. They rely on background images, and there are a number of reasons why your visitors might enforce their own color schemes, overriding your design's colors and backgrounds, including background images.
|
pandy |
Apr 20 2017, 06:10 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't understand what exactly you need help with. Your page uses ordinary images, not sprites. Can you show us a page where you actually use the sprite?
I agree with Darin though. Don't think those images should be sprites. |
Lo-Fi Version | Time is now: 25th April 2024 - 01:25 AM |