How to code image in css and se in wordpress post?

**BattleDuty** · 14th Mar 2012, 11:20 AM

I'm working on some project and using wordpress as cms..

I managed to learn and fix few things but I want to know this.

How to code image in css and se in wordpress post??

For example:

Code:

http://www.oneddl.eu/tv-shows/southland-s04e09-hdtv-xvid-2hd/

See the image

I think it's coded in css and used on posts using <span> </span>

but can anybody say how? or correct me if I'm wrong with tut?

EDIT: Not ripping or has anything to do with Oneddl theme.. Just for learning I used it as an example.

Thank you!

BattleDuty Reviewed by BattleDuty on 14th Mar 2012. How to code image in css and se in wordpress post? I'm working on some project and using wordpress as cms.. I managed to learn and fix few things but I want to know this. How to code image in css and se in wordpress post?? For example: http://www.oneddl.eu/tv-shows/southland-s04e09-hdtv-xvid-2hd/ Rating: 5

CJ · 14th Mar 2012, 11:27 AM

It is done using CSS sprites
http://css-tricks.com/css-sprites/

OG IMAGE > http://images.oneddl.eu/site-img/one...ddl_sprite.png

CSS code

Code:

infoimg { 
background-position: -359px -283px;
 }
infoimg, oneclickimg, downloadimg { 
background: url("http://images.oneddl.eu/site-img/oneddl/oneddl_sprite.png") no-repeat transparent;
display: block;
height: 23px;
width: 192px;
 }

so if u write tag <infoimg /> it will show u

if u write tag <oneclickimg /> it will show u

PS..Done Just for the sake of educational purpose.

**t3od0r** · 14th Mar 2012, 11:29 AM

check the css file

Code:

infoimg, oneclickimg, downloadimg {         
display: block;    
 height: 23px;     
width: 192px;     
background:url(http://images.oneddl.eu/site-img/oneddl/oneddl_sprite.png) no-repeat; 
}  
infoimg{     
background-position: -359px -283px; }

**BattleDuty** · 14th Mar 2012, 11:34 AM

^^Thanks! but any chance of fresh example with steps?

Just for educational purpose.

CJ · 14th Mar 2012, 11:54 AM

Steps:

1. Join all images with some software

2. Assign Background to every element u would use for displaying spritted image
//sprite1, sprite2{background: url(x.jpg) no-repeat top left;display: block;}

3. Assign the possition from which ur element starts in spritted image
//sprite1{ background-position: 0 0; width: 125px; height: 150px; }

Images:
Sprited Image (x.jpg) : http://i.imgur.com/znxpb.jpg
Input Image1 (1.jpg) : http://i.imgur.com/MmMzv.jpg
Input Image2 (2.jpg) : http://i.imgur.com/9IvmW.jpg

simple example1 (xxxxx.html)

Code:

<head><style>
sprite1, sprite2{background: url(x.jpg) no-repeat top left;display: block;}
sprite1{ background-position: 0 0; width: 125px; height: 150px; } 
sprite2{ background-position: 0 -200px; width: 125px; height: 150px; } 
</style></head>

<body>
<sprite1> XXX</sprite1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<sprite2 />
</body>

simple example2 (xxxxx2.html)

Code:

<head><style>
.sprite1, .sprite2{background: url(x.jpg) no-repeat top left;display: block;}
.sprite1{ background-position: 0 0; width: 125px; height: 150px; } 
.sprite2{ background-position: 0 -200px; width: 125px; height: 150px; } 
</style></head>
<body>
<div class="sprite2"> XXX</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="sprite1"> XXX</div>
</body>

How to code image in css and se in wordpress post?

Thread Tools

Display

How to code image in css and se in wordpress post?

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

[Hiring] code for Right click Image uploader

Wordpress Post Image Help

Insert Image Code

Insert Image CODE

Image Upload in php. Code snippet #2

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaCreator - create posts from...

themaPoster - post to forums and...

themaCreator - create posts from...

themaManager - edit and manage...