Bert Coules

Well, after some experimentation it seems easier to darken a background picture by overlaying a solid colour with less than 100% opacity. More elegant than using two separate images, certainly.

I'm working on a site with an overall background image. On the home page the image is at full brightness but on all subsequent pages it's darkened right down so as to be much less distracting: I'm using two separate jpg files to achieve this. When the user moves from the home page I'd ideally like the background to darken gradually. Thanks to an answer in another thread I know there's a simple jQuery command to fade in either an entire page or a selected part of it, and I thought I'd try fading in the whole of the pages with darker backgrounds: I hoped that might give the illusion of

I've just been trying different combinations of that line and you're quite right: it was the space. I should have seen that ages ago. I really shouldn't be doing this stuff at ten to three in the morning. Funny thing, though: in the coding I cut and pasted from Notepad++ in my first post (and again later) there is no gap. But I'm too tired now to look into why. Thanks again.

I'll correct both of those... That did it! I don't know if it was the space before the bracket or the inverted commas, but now it's working perfectly. I'm very grateful.

The files are in a test directory here: Temp upload now removed. Thanks again.

The filename is all lowercase, including the extension (which is jpg!). If I upload the files to a directory on my existing site, would you take a look online? I'll do that now.

I had tried that earlier, but just tried it again. I can see that it's right and that what I posted above was wrong, but it still doesn't bring up the image. I also just tried copying the image into the same directory as index.php and making the style sheet read background: url("background.jpg"); but still no joy.

Thanks for the speedy reply. In the pared-down file the paragraphs aren't floated or positioned at all. They're only there to give the div some height, and it works nicely: I see the vertical list of words, bordered by the blue 1px border. I just don't see the background! When that vertical list is eventually replaced by the proper menu I won't be using <p> at all.

I ran across a problem with a background image not appearing in a div. I couldn't see anything wrong with the coding at that point (which doesn't mean that there wasn't something wrong, of course) so as an experiment I started stripping away other areas, checking at every stage, to see if there was something elsewhere interfering. It's a technique that I've found useful in the past. Eventually I'd removed almost everything and got down to something extremely basic: style.css: .columns { background: url("images/background.jpg"); border: 1px solid blue; } inde

Thanks for the suggestion. The link goes straight to an example: to put it in context I had to back up to the introductory page: http://www.w3schools.com/ajax/ which proved to be the first of many. I'll have a proper read of them tomorrow.

I'm putting together a website purely as a learning exercise, so I can experiment with new (to me) techniques and approaches without interfering with my two live sites. One thing I'd like to explore is smooth page transitions, or, more accurately, smooth transitions on just one area of a page with the rest - the heading and a side menu - remaining constant. A Google search throws up a vast amount of information but most of it seems to be at a far more complex level than I need and assumes a fairly high level of existing knowledge. Can anyone point me towards a more basic, step-by-step

Redredc, thanks for that, especially the width-comparison site. I knew of several others but not that one. I experimentally created a very simple single-column gallery and uploaded it to the test directory where the rest of the site is being developed. On that comparison site it doesn't look bad: I used a standard image width of 640px, and on wider screens the blank space at the right hand side is acceptable, I think, though the longer captions aren't wrapped at the same width but continue across. If you'd like to take a look, the gallery and the rest of the site is now live at http:

What is the general view on adding a gallery to a mobile-friendly site? Obviously it would be sensible to make the image file sizes as small as possible consistent with quality, but beyond that, is there any agreement as to the best method of presenting a series of images? Presumably the simplest way is just to be low-tech and stack pictures one above another in a long single-column page, with captions beneath each image, but are there better approaches which perhaps don't put too much strain on a mobile connection? Many thanks.

Ingolme, that worked beautifully. Many thanks for the speedy reply.

Again, many thanks for all the help and advice so far; much appreciated, and my primary website now exists in a completely (or so I hope) mobile/tablet-friendly version. I want to do the same to a second site. The basic construction is simple: one column made up of four divs: header_box top_box text_box footer_box The top box holds an image at its left and a menu icon at its right: The problem is that I want to eliminate the extra line-space below the image, and also to position the menu icon just above the bottom edge of the div. This is the present coding: #top_