CODEWITHSUNDEEP
javascripthtmlcssimage
Lance Bitner
Lance Bitner

Reputation: 356

How do I make a sliced image the background-image of the body?

I have a large image set as a background: 

<body onload="StartTimers();" onmousemove="ResetTimers();"
style="background-image: url('img/bkgrnd.jpg'); background-size: 100%;">

That is the problem; it is 1.72mb (1900 x 1400). I really don’t want to size the image down in Photoshop and lose image quality. But it is slowing my load time. One of the things I am trying to do is speed up the load time for my web page.

I figured using a sliced image would be the best way. So I am trying to use a sliced image made from Photoshop. The problem is the HTML code it creates makes a table, no matter how I try to save it. But I need the image in the background, and tables are not ideal.

I tried to set the sliced images in the body these two ways:

body{
background-image: url(images/bkgrd_01.jpg), 
url(images/bkgrd_02.jpg),......url(images/bkgrd_27.gif);



<body background="url(images/bkgrd_01.jpg), 
url(images/bkgrd_02.jpg), url(images/bkgrd_03.gif),.......
url(images/bkgrd_27.jpg)">

Does anyone know how to make a sliced image a background-image for the body of the page?

Upvotes: 1

Views: 50

Answers (1)

John Shang
John Shang

Reputation: 417

1.tinypng.com

2.photoshop ctrl+alt+shift+s 100%

Upvotes: 1

Related Questions