Member Avatar for ShilohAmi

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> 

Hi, do you know about cascading style sheets?

Member Avatar for ShilohAmi

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

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/

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.

Member Avatar for ShilohAmi

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..

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!

Member Avatar for ShilohAmi

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..

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.

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.