background image not filling screen

Regarding the background, the background-repeat: no-repeat; is preventing the background from repeating. setting it to repeat or removing it would let the background fill the entire site content.

PS: The image has a white border to the top and right, so when it repeats you get a white border which doesn’t look so good.

You would be better off doing a CSS background for the entire page. Fiddle here – https://jsfiddle.net/er8zLk5a/

The width issue is due to the following css in styles.css

#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}

It limits the width to 928px. #access has a width of 940px. At first glance, changing the width to auto worked, but I am not sure if it affects the rest of your site.

Thanks very much for those 2 solutions!

I fixed up the horizontal nav menu: the ‘auto’ setting worked fine.

I tried doing a CSS gradient but got some weird results (it started about half way down the page, leaving the top half of page blank).

So I re-saved the jpeg in Photoshop, making sure there are no border lines. I got rid of the two white lines but now I have a grey margin on the right-hand side of the screen:

https://www.wpm-temp.com

I would be very grateful if you know how I can get rid of that margin.

Thanks again!
Michael

The grey margin on the right hand side of the screen is because the background image has begun repeating and you can see the initial part of the image.

One thing you can do is to include background-color and limit repeat to one direction in your style defintion

body {
    background-image: url("../../../images/BG.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: repeat-y;
    background-color: #xxxxxx
    width:100%;
}

where xxxxxx is the color of the extreme right of the gradient. background-repeat will make the background repeat only vertically and the remainder of the screen will be covered by background-color

PS: I can see what you mean by the gradient appearing only from halfway. The div with id ‘wrapper’ has a background color of #fff which is overriding the gradient color.

Thanks so much for that, I just removed that ‘background-color: #fff;’ from the id wrapper and the grey margin on right-hand side of screen disappeared.

Now that I know why the css gradient wasn’t working I’ll have another go at it.

Thanks again!

Actually, I was wrong, the grey margin was still there (I hadn’t scrolled far enough right).

I implemented your solution above but now I have a white vertical band running along the right hand side. Any suggestions?

Thanks very much.

Can you post a screenshot of the page? I opened the site in both FF & IE and they didn’t have the problem that you mentioned.

One thing you could do is create a really wide background image (it can just be a few pixels in height) and use it instead of a 598×404 px image. Here is one that is 1920x10px and should work better https://pbrd.co/1HKAfa3

Thanks for that. I uploaded that background image as thinBG.png. I’m not sure if it has changed anything. One thing that did help with the background image was including these two div tags from the original WP template:

<div id="container">

			<div id="content" role="main">

I’m stumped by another issue at the moment. I created a 3-column layout using this HTML:

<!-- Three Column Layout -->

         <div id="content-1">

	 This is the 1st column	

	</div><!-- #content-1 -->

	<div id="content-2">

	<div id="content-2-1">

       This is the 2nd column

        </div><!-- #content-2-1 -->

        <div id="content-2-2">

        This is the 3rd column

        </div><!-- content-2-2 --> 

       </div><!-- #content-2 -->

together with this CSS:

#content-1 {
    float:left;
    width:25%;
    background: red;
}

	#content-2 {
    float:right;
    width:65%;
} 

   #content-2-1 {
    float:left;
    width:80%;
    background: yellow;
}
#content-2-2 {
    float:right;
    width:20%;
    background: green;
}

As you can see, I colour-coded the divs to help identify what is going on:

https://wpm-temp.com/beaches

The problem is that although the combined value of the two ‘parent’ columns (content-1 and content-2) is 90% (25% and 65%) the 3-column layout seems to be restricted to about 70% of the screen.

The white area is the ‘container’ div. Somehow I need to specify that I want the 3-column layout to take up 90% of the container div. That’s where I am stuck.

If you have any suggestions I would be very grateful.

Thanks!

I solved the above problem by adding a margin-left: -20px; to the #main div and the #header div. Probably not the right way to do it but it worked. Thanks again for all your help!