The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> need help with css sprites
falcon
post 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; }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2017, 06:10 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
falcon   need help with css sprites   Apr 19 2017, 10:52 PM
Darin McGrew   If you use CSS sprites, then make sure the images ...   Apr 20 2017, 12:19 AM
pandy   I don't understand what exactly you need help ...   Apr 20 2017, 06:10 AM
Christian J   I agree with Darin though. Don't think those ...   Apr 20 2017, 10:15 AM
Christian J   2. have it display correctly for different screen...   Apr 20 2017, 10:29 AM
falcon   Thank You for the code, will try it. Will respond ...   Apr 20 2017, 09:48 PM
falcon   Thank You for the code, will try it. Will respond...   Apr 22 2017, 08:54 PM
falcon   CSS code *{margin:auto;} /* background col...   Apr 22 2017, 09:02 PM
Christian J   I meant the HTML version with sprites (that goes a...   Apr 23 2017, 06:47 AM
Christian J   Here's a quick idea on how to do it with CSS, ...   Apr 23 2017, 12:14 PM
falcon   Here's a quick idea on how to do it with CSS,...   Apr 23 2017, 10:19 PM
falcon   Here's a quick idea on how to do it with CSS,...   Apr 24 2017, 08:24 PM
Christian J   A web page analyzer said TOTAL_OBJECTS - Caution....   Apr 26 2017, 06:03 PM
falcon   A web page analyzer said TOTAL_OBJECTS - Caution...   Apr 26 2017, 07:01 PM
pandy   No, I don't think you did. I think objects mea...   Apr 27 2017, 05:46 AM
Christian J   It would be easier to understand your replies if y...   Apr 25 2017, 12:55 PM
falcon   http://forums.htmlhelp.com/lofiversion/index.php/t...   Aug 9 2017, 12:23 AM
falcon   <!doctype HTML > <html> ...   Aug 12 2017, 01:36 AM


Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:42 AM