How to put slice image into html?

Question

ShilohAmi

8 Years Ago

Hi all.. I am a newbie in web programming and I have question how I can put my slice images html as background in html?
I already slice it with photoshop and save it as html, the slice image is showing but they are in table format.. How I can set this as background?

 <table id="Table_01" width="1281" height="721" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="images/Info_01.jpg" width="374" height="1" alt=""></td> <td colspan="9" rowspan="2"> <img src="images/Info_02.jpg" width="533" height="240" alt=""></td> <td> <img src="images/Info_03.jpg" width="373" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/Info_04.jpg" width="374" height="342" alt=""></td> <td rowspan="3"> <img src="images/Info_05.jpg" width="373" height="342" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="239" alt=""></td> </tr> </table>

html-css image

3 Contributors
8 Replies
318 Views
3 Hours Discussion Span
Latest Post 8 Years Ago Latest Post by gentlemedia

cereal 1,524 Nearly a Senior Poster

8 Years Ago

Hi, do you know about cascading style sheets?

Edited 8 Years Ago by cereal

gentlemedia 803 Master Poster

8 Years Ago

Don't save it in Photoshop as HTML. You'll get rubbish as you can see. Just recreate the the design with CSS and proper mark up. A lot of things you can do nowadays pure with CSS unless you need to support IE8 and below.

http://learn.shayhowe.com/html-css/

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ShilohAmi · Answer 1 · 2016-04-30T14:58:50+00:00

Yes I know css.. Do you have any solution?

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 2 · 2016-04-30T15:09:36+00:00

Yes I know css.. Do you have any solution?

Yes, using background-image for example, but I cannot suggest you the perfect solution as I haven't seen your design, nor I know how do you want the page to work with different window sizes and display resolutions.

ShilohAmi · Answer 3 · 2016-04-30T15:24:05+00:00

Don't save it in Photoshop as HTML. You'll get rubbish as you can see. Just recreate the the design with CSS and proper mark up. A lot of things you can do nowadays pure with CSS unless you need to support IE8 and below

Do you mean option "Copy CSS" from Photoshop? Actually I'm not have deep knowledge in web development can you explain it?

Yes, using background-image for example, but I cannot suggest you the perfect solution as I haven't seen your design, nor I know how do you want the page to work with different window sizes and display resolutions.

But the size image is very big so I need to slice it, I'm just focus in 1280x720 resolution right now.. I can't put the design since it's not my own design..

gentlemedia 803 Master Poster · Answer 4 · 2016-04-30T15:28:37+00:00

Do you mean option "Copy CSS" from Photoshop? Actually I'm not have deep knowledge in web development can you explain it?

No I mean hand code everything, but you do need indeed some basic understanding of HTML & CSS in order to do so. The link I've posted is a good place to start with. PSD to HTML is pretty much dead!

ShilohAmi · Answer 5 · 2016-04-30T16:02:20+00:00

No I mean hand code everything, but you do need indeed some basic understanding of HTML & CSS in order to do so. The link I've posted is a good place to start with. PSD to HTML is pretty much dead!

I never know that design using photoshop can be recreate with css.. It's seems hard but I'll try it.. Thanks..

gentlemedia 803 Master Poster · Answer 6 · 2016-04-30T16:38:39+00:00

Well... it's not fully replaced by CSS. But common design elements like rounded corners, gradients and shadows can now be done with CSS. It's the slicing part of PSD to HTML that is pretty much a thing of the past.