My background header isn’t appearing and I want to know why??!
ul#nav {
height:1200px; width: 194px;
margin: 0 auto;
background: url(Jana/backgroundheader.jpeg) no-repeat;
}
It could be a number of things, such as:
- is the folder /Jana/ inside the folder that houses the CSS file? If not, the path is wrong.
- does the image really end with a .jpeg extension? The norm is .jpg, so check that, and maybe change the extension, as I’m not sure if .jpeg works on the web.
My computer says JPEG and JPG are the same. Changed the path back and forth it still doesn’t work.:mad:
I saved it as a .gif and .png still nothing…something small is going on here, just like last night!
So what about the path then? I suggested two things above—the two most obvious things I could think of.
If the path is ok too, perhaps show us the HTML that CSS is associated with.
True, I’ll check once more are pathways always a minor problem for beginning programmers?
I guess so. They are one of the easiest things to get wrong. I would recommend having an images folder located in the root directory, and cite it as “/images/image.jpg”. Having that slash at the front means the path will be corret no matter what page the link appears on. Makes life much easier than having to work our the path for each particular page.
At the moment, you have to be careful that the /Jana/ folder is in the same folder as the CSS file, which generally isn’t a good location for an images folder.
The reason I don’t think it’s the path is because I’m using the same path and it is in the exact same folder. I’m still playing around with it to see what is wrong.
Could you clarify what you mean by that? At te moment, assuming your have a .css file in a /css/ folder, your image would have to be here:
/css/Jana/backgroundheader.jpeg
’
Ok I finally got it to work but the image is too large when the screen is at 100% and aesthetically it looks horrible.
body {
font-size:62.5%
font-family:Helvetica, sans-serif;
background: url(Jana/upgrade.png) repeat-x top;
background-color: #ffcc33;
}
ul#nav {
height:900px; width:1200px;
background-repeat: no-repeat;
background-image: url(backgroundheader.jpg);
The current height of the image is 1200 X 194 but I changed it to 900 x 1200 but the user still has to scroll (which I do not want) and it just looks huge should I go back into photoshop and change this some how?
BG images won’t cause a scroll, but rather the dimensions of the divs. Anyhow, yes, if the image is too large, resize it in Ps.
I resized it from 1200 to 900 by 146 and its still causing me problems I’ll resize it again to see if anything changes but I’m wondering if its how my page is setup.
I’d say so. Feel free to clarify what is is you are trying to do and we can help further. At this stage it’s not clear what issues you are running into.
Photoshop is telling me that 800 by 130 is the best that my image can be viewed at, at 100% which means the user would still have to scroll.
Well basically this is my CSS:
root {
display: block;
}
* {
margin:0;
padding:0;
}
body {
font-size:62.5%
font-family:Helvetica, sans-serif;
background: url(Jana/upgrade.png) repeat-x top;
background-color: #ffcc33;
}
ul#nav {
height:1200px; width:1200px;
background-repeat: no-repeat;
background-image: url(backgroundheader.jpg);
}
The actual image is 800 by 130 but my browser keeps making me change to 1200 by 1200 for the user to view the image and even then the user has to scroll plus it looks way too large. If that description still doesn’t help then I could upload the site live and show you from the actual website.
You see my entire problem stems from setting my original photoshop page at 50% instead of 100% so now everything is larger in actually then it needs to be. I did this because a tutorial suggested it but now I don’t need what to do because all of my photoshop elements are at a 50% view instead of 100%.
That would make things much easier, as I have a feeling there is something else going on here too. 
Yes, if you are doing visuals in Ps, it’s important to consider the dimensions of the website beforehand—to avoid a lot of reworking later on.
I just uploaded it to the FTP so its still working everything in give it a little while.
I see a couple problems when I view the source code and css for your site.
At the time of this writing, the body is styled with a bright yellow background. Great!
The body is also styled with a font size of 62.5%. As no previous fonts have been specified, your website will display at the 62.5% of the default of whichever the browser your site visitors are using. Default font sizes in different browsers tend to differ somewhat but 62.5% of the default is usually quite small. You can test this yourself by adding some content or dummy content and viewing the site in different browsers to compare the results.
Next we come to the body background image…
background: url(Jana/upgrade.png) repeat-x top;
Your current css points to the image called upgrade.jpg located in the FOLDER named Jana and tells the browser to repeat the image only on the x-axis (horizontal) until it reaches the end of the body. I don’t see the upgrade.png image; is it possible to forgot to load it and its container folder called Jana?
Next, there is an unordered list you’ve correctly named id=nav , a list you’ve semantically named id=“navigation” in the html. Let’s take a closer look at the styling of the list.
First you set your navigation list dimensions with the following line in css: height:1200px; width:1200px; That means your navigation will be viewed in all browsers at those dimensions, not a problem with browser windows that size or great but may cause scrolling issues, both horizontally and vertically for those with small viewer ports.
(By the way navigation dimensions of height:1200px; width:1200px; are highly unusual; the navigation could take up the entire viewport of a browser. Is that your intention?)
The next css line (background-repeat: no-repeat; ) tells the browser to display the assigned navigation background image only once. No problem with that, although you could merge this line of css with the following line
The finall css line:
(background-image: url(backgroundheader.jpg);
defines the image you want to use as the background of your navigation list, in this case the file image entitled backgroundheader.jpg. This image has a size of 800px X 130px and combines your logo, menu graphics against its own background, all against a lighter yellow background. The backgroundheader.jpg takes up 800px X 130px of the available 1200px X 1200px container (ul id=“nav”) the image resides in on your html page.
Is it your intention to display your logo and menu as the same graphic? What works well for many people is to have their logo separate from other elements (such as nav) and placed in a header div.
You can use sprites for menus, controlled by css positioning but I can’t tell from your site if that is your intention. Alternatively, you might want to consider removing the text from your background nav image and using lists to create your navigation items as list items, and styling the list and list items with css.
If you intend to keep your navigation div as 1200 px height, be forewarned that there probably won’t be much room - if any - on the page for content. You don’t want to place content - other than navigation items - in the navigation division as that would be semantically incorrect.
Hope this clarifies some of the issues a little bit. Keep at it - there is a lot to learning html and css and sometimes the learning curve can be somewhat frustrating but there will come a moment that the majority of what you’ve learned fall into place and it will be very rewarding!
Thanks alot man I want to work on this more and have my website done by August but i’m limited because of the 30 day trial for photo shop and I don’t have the money to buy it but i’m hustling hard to get it.