Converting a Photoshop Mockup

I’m converting my photoshop mockup into HTML/CSS and when I reload the page its not showing my background?! What am I doing wrong?

root { 
    display: block;

* {
body {
        font-family: Helvetica, sans-serif;d
background: url(image/body-bg.png) repeat-x top #ffffcc

I think I messed up this line!

background: url(image/body-bg.png) repeat-x top #ffffcc

I’m not sure if thats a pathway or not, any help?

The problem is probably the “d” at the end of this line:

font-family: Helvetica, sans-serif;d

The background line itself is ok, although it’s more common to have the color part first, though browsers seem to send it to the end anyhow, so that’s not the problem:

background: #ffffcc url(image/body-bg.png) repeat-x top

The only other problem could be the path to the image, but I suspect the errant “d” is the problem. :slight_smile:

When I run the index.php it still doesn’t show the style.css either that pathway is wrong or I have to input something within my text editor to run the style.css or does it automatically run the entire project when I click run project? If the pathway is wrong how do I change it to where I file actually is?

You’ll need to show us a bit more of your code (or preferably a live link) for us to tell if your paths are right or not.

In terms of the image path, this

background: #ffffcc url(image/body-bg.png) repeat-x top;

is telling the browser to look for a folder called /image/ in the same folder as the current page. If that’s not where the image folder is, then the path is wrong.

Your talk of clicking “run project” sounds dangerous to me. Is that Photoshop talk?

Basically, you will have a file that ends with .html or .php etc. that will have a basic structure like this:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
[COLOR="Red"]<link type="text/css" media="all" rel="stylesheet" href="style.css">[/COLOR]


That line in red is the link to another file (style.css) that holds all of your page styles. The path to it (e.g. /style.css or css/style.css etc) will depend on what folder you keep it in.

The actual page content goes between the body tags (shown in blue).

Does that make any sense?

Most of it makes sense, I did what you said but it still didn’t work. I meant to tell you I’m working out of the NetBeans framework and I have a project which contains my two files; index.php and style.css. Ok I’ll break it down I have a folder of my desktop that contains all the files for my website, it is called Jana. When I open Jana I have my NetBeans folder within Jana and it too is named Jana and within my NetBeans folder I have my inex,style,register,and bg-background files. When I save the bg-backbround file it automatically becomes a Fireworks Document could that be the problem? When I say run I’m not talking about Photoshop I’m talking about NetBeans which runs the project. This is my first website so I don’t mena to be so vague or idiotic lol I just don’t see in my head how to get away from the Photoshop. I’m not using it constantly and actually I’m Done using it! My template is done with the exception for the thousands of lines of PHP code that I have to input but like you said that has nothing to do with photoshop. I am trying to convert my template to HTML/CSS but I cannot see in my head how to code my 8 footer tabs, and 5 header tabs without creating 13 photoshop documents. I know you said I need to use links but my layers are within photoshop so right now I’m trying to make this pathway work but I stil don’t know if it is correct because it isn’t working.

background: url(Jana/upgrade.png) repeat-x top #ffffcc

I also didn’t add a pathway to the HTML link style.css code you gave me where should I put the pathway in there?

I KNOW WHAT I PROBLEM WAS!!! I just fixed it the problem was I had placed the <link> tab in between the <body</body> tabs when it nears to inbetween the <head> elements.

Now all I need to do is get the correct # color code #ffffcc is not the right color code :mad:

Do you mean te color isn’t showing up or that you want a different color? I find Photoshop is handy for choosing colors and grabbing the color code.

No the color is showing up fine but I’m trying to grab the color code but the item of my layer I don’t think it’s #ffffcc and I’m trying to figure out what it is exactlY? Any tips?

Not really sure what you mean, but if you are looking at a browser and want to get the color, you can use the firefox ColorZilla:

I presume you are talking about something else, though.

No the color is showing up fine


but I’m trying to grab the color code

Where from?

but the item of my layer I don’t think it’s #ffffcc

This isn’t really web design language. Are you talking about Photoshop? It sounds like you are asking how to determine colors in Photoshop, but I’m not sure.

Right I need to get the color from photoshop and replace it with #ffffcc but I don’t know how.

I’m not so good at Ps, but I think you can target an item by clicking on it in the Layers palette. If you double click it, the color palette pops up. Could you describe in more detail what it is you are re-coloring?

I’m not recoloring anything I’m just changing the background in my style.css

OK, then open your stylesheet and alter the color value. It’s still not clear where the problem is.

In Ps you can open the color palette and choose a color from the round color wheel. At the bottom of the palette is will show you the color value, such as ffcccc. Copy this (or write it down), open your style sheet, and change the current value in your style sheet.

Is there any part of that that doesn’t make sense? I’m not sure how you are working with files or what you are using to modify them. Do you know where your style sheet is, or have easy access to it?

No I don’t have any of those problems I’m trying to access this color wheel my style sheet is perfectly fine and the code is all fine.

Ah, well, make usre you have a Photoshop file open—even if you just create a temporary one. Just go to file > new and create a blank document. Then you’ll see the color palette options (probably at the top right of screen).

Otherwise, use something like this, which I use a lot and really like: