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; } |
Lo-Fi Version | Time is now: 27th April 2024 - 09:56 PM |