how can i slice this background

**judge0** · Nov 20, 2008 21:15

only i can do take 1px from striped background and add it to body element
but what bout white one like a paper i take it as the whole image or something else
plz guide me

Thx
judge0

**craqgerbil** · Nov 21, 2008 04:16

i would take the edges (top, bottom, right, left) where the bottom page sticks out

since the top page is white, it shouldn't be a problem to just make that white in the background of the table, or however you are makeing the site

**judge0** · Nov 21, 2008 08:26

i would take the edges (top, bottom, right, left) where the bottom page sticks out

can u clarify more.
now i think slice it just 2parts( top, bottom) but still this choice as i take it as whole image

**cipals15** · Nov 21, 2008 10:53

What he/she mean is that you removed the inclined edges of the paper background. Thus, the only remaining part will be a white rectangle background.

Take the edges: Top, Left, Right and Bottom.

**judge0** · Nov 21, 2008 11:00

What he/she mean is that you removed the inclined edges of the paper background. Thus, the only remaining part will be a white rectangle background.

Take the edges: Top, Left, Right and Bottom.

me too i just ask him/her to clarify more.

but till now no one replay how can i slice this withe background

**Erik J** · Nov 21, 2008 11:58

How to slice it depends on the page it will be used for, is the width fluid or fixed, is the height too?

**judge0** · Nov 21, 2008 12:04

fixed layout and the height around 900px but may the height increase or decrease as content required

**cyjetsu** · Nov 21, 2008 13:32

Would you want the white pages to slide accross that darkbackground? Then I guess you would need to make some parts transparent with gifs or something?

**Centauri** · Nov 21, 2008 16:13

Due to the angles of the lower paper, you would be limited to a fixed size - the design would not allow any sort of dynamic resizing in width or height. As such, there is little point slicing it at all - I would crop it the the minimum size possible and experiment with different graphics formats to determine which one results in the smallest file size. It can then be applied as a background to your site container, with the body background a narrow slice as you have suggested.

**judge0** · Nov 21, 2008 18:30

this my try for white background i make only (top-bottom)

-------------------------------

bottom

is there any better way than my own plz share it

**Centauri** · Nov 21, 2008 18:56

As I said above, I don't see the point of slicing this at all, especially not saved in two different formats. You have also chopped off some of the shadow, which would result in an abrupt outline. With one graphic cropped to around 666px wide and 800px high, a jpg format can be compressed to about 20k total size with good image quality.

**craqgerbil** · Nov 21, 2008 21:25

start like this,
1. make the background separate
2. slice to the red lines approximatly( save as png/gif etc. to save the transparency)
3. use css to put those images on a white box around the edges

saves on the huge file you have 4 smaller file

**Centauri** · Nov 21, 2008 22:06

Originally Posted by craqgerbil

saves on the huge file you have 4 smaller file

If these smaller images are png-24 with alpha transparency, then the total size of the four would most likely be larger than the 20k jpg I posted above. You would also need three or four additional non-semantic html elements to attach the images to, as well as hacks to make it work in IE6. The image is not changing in size or moving in relation to the body background, so why complicate matters? - I like the K.I.S.S. methodology.

**Erik J** · Nov 22, 2008 06:48

Originally Posted by judge0

...
is there any better way than my own plz share it

As Centauri says it would be better not sliced I think.

Maybe use the image as a "foreground" background and make the site grow in height only streching the image height, but it could maybe also be a fluid site like this test example:

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html { 
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}
body { 
	margin: 0;
	padding: 0;
	height: 100%;
}
img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#wrapper { 
	position: absolute;
	margin: 35px 0 0 7%;
	width: 86%;
	height: 92%;
	overflow: auto;
	overflow-y: scroll;
}
#content {
	padding: 1px 0;
}
#content p {
	margin:200px 0;
}
</style></head><body>
 
	<img src="backgrounda4tp3.jpg" alt="">
 
	<div id="wrapper">
		<div id="content">
			<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
		</div>
	</div>
 
</body></html>

And here is the 12 kB image:

**judge0** · Nov 22, 2008 07:33

start like this,
1. make the background separate
2. slice to the red lines approximately( save as png/gif etc. to save the transparency)
3. use css to put those images on a white box around the edges

saves on the huge file you have 4 smaller file

really this nice idea i want to hear something like that but as Centaur said it's hard to reach more extra element and hack
-

a jpg format can be compressed to about 20k total size with good image quality.

what software are u used to?, i reach 20k but i think the quality affected

@erik.j

1)may i ask why u repeat margin:0 padding:0 to the body

2) stretching the content will be on account of the quality of the image

3) overflow-y: scroll this harm the design even if the content not grow

**cipals15** · Nov 22, 2008 10:03

Originally Posted by Centauri

If these smaller images are png-24 with alpha transparency, then the total size of the four would most likely be larger than the 20k jpg I posted above. You would also need three or four additional non-semantic html elements to attach the images to, as well as hacks to make it work in IE6. The image is not changing in size or moving in relation to the body background, so why complicate matters? - I like the K.I.S.S. methodology.

I think you're right but never tested the size difference. The purpose of dividing the image is to actually optimize for users will slow internet connection. Loading the whole image is slower than loading the divided images.

**Erik J** · Nov 22, 2008 13:21

Originally Posted by judge0

@erik.j

1)may i ask why u repeat margin:0 padding:0 to the body

2) stretching the content will be on account of the quality of the image

3) overflow-y: scroll this harm the design even if the content not grow

1) The browsers default margin/padding on the body could move the content but not the image. The body must not hide overflow so it need its own rule-set.

2) Yes.

3) It's an option.

**Erik J** · Nov 22, 2008 13:29

Originally Posted by cipals15

Loading the whole image is slower than loading the divided images.

No, it is the other way around. Adding to the images size is also the extra http requests needed.

**Dan Schulz** · Nov 22, 2008 13:34

And yet loading each image incurs a separate "handshake" between the browser and the server. Sometimes it's actually faster to load a single image instead of multiple ones. (It's also one of the reasons why CSS sprites are so popular.)

User Tag List

Thread: how can i slice this background

Thread Tools

Display

how can i slice this background

Bookmarks

Bookmarks

Posting Permissions