School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,398
  • Replies: 825,968
  • Topics: 137,449
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,608
  • Members: 129
  • Guests: 1,479

Welcome to Dream.In.Code
Become an Expert!

Join 300,398 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,608 people online right now. Registration is fast and FREE... Join Now!




Splitting up an image to be several different background images

 

Splitting up an image to be several different background images
Ryanmiller

30 Jun, 2009 - 01:39 AM
Post #1

New D.I.C Head
*

Joined: 20 Jun, 2009
Posts: 16


My Contributions
If you go to " http://www.componentart.com/services/products.aspx " and right click on the 3D sphere image with the three chain links icon thing, and select 'view background image,' you'll see this image: " http://www.componentart.com/services/img/products/static.png "

How do you split up a single image like that, and make certain sections of it backgrounds for multiple divs?

User is offlineProfile CardPM
+Quote Post


forest51690

RE: Splitting Up An Image To Be Several Different Background Images

30 Jun, 2009 - 07:49 AM
Post #2

D.I.C Head
Group Icon

Joined: 20 Mar, 2009
Posts: 115



Thanked: 17 times
Dream Kudos: 50
My Contributions
This is good web design practice. It saves bandwidth by eliminating the headers sent for each file.

Here's how you do it. You put the image as a background-image of an element. Then you position it using background-position. You can use negative values.

The syntax is this: background-position: left top;
where left and top are numbers.

This post has been edited by forest51690: 5 Jul, 2009 - 05:43 PM
User is offlineProfile CardPM
+Quote Post

ImportedNoob

RE: Splitting Up An Image To Be Several Different Background Images

30 Jun, 2009 - 02:14 PM
Post #3

New D.I.C Head
*

Joined: 29 Jun, 2009
Posts: 7



Thanked: 1 times
My Contributions
This is a snippet of their CSS file.

.ftr-l
{
width:9px;
height:100%;
background:transparent url("/common/img/dlg/static.png") no-repeat 0 -80px;
float:left
}


The 0 -80px is the background-positioning that he is talking about.

This post has been edited by ImportedNoob: 30 Jun, 2009 - 02:15 PM
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/7/09 10:11PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month