Header Image Problem – not visible

file path and file names of the images could be case sensitive in some browsers – please double check.
9MB for a background is gigantic, took over 2 minutes to load in firefox, maybe IE just times-out? .png is also unneccessary large – .jpg might be smaller.

no text in header:
#logo h1, #logo p {display:none;}

i am not sure what an image map or block header is, though.

to have the background img just once on top in the center:
body {background: #ff9900 url('Images/SchoolAssembly.png') top center no-repeat;}
obviously the other styling for body stay the same.

Hello Alchymyth,

Thank you for the response and advice much appreciated the header text has disappeared which is a great start – I’m not sure I understood you fully so I’ve probably not implemented it properly!!!

If its OK with you I will list my issues and deal with each separately then hopefully it will be easier to understand me.

Background Image:

I have exchanged the .png for .jpg on the SchoolAssembly file (now it is 700KB’s) should I still make it smaller as its not visible in IE but is visible in Chrome and Firefox?

Header (Banner) Image:

Still not visible – the file is called header.png and is in the images file.

Reducing the Gap:

I would like to reduce the distance between – and sorry for the poor terminology – the yellow strip with the words: Home, About, Recent Letters and Test_Display and the Block Headers: Blog and School Calendar??

Many Thanks once gain,
Dewi

sorry – I meant to say I checked case sensitivity.

The images file is definitely lower case and the file names now have the correct case – I changed the header file from nhs_banner.png to header.png to trial this..

Cheers,
Dewi

let’s start: at the bottom of style.css, where you started changing things:

`/*trial to change the header*/

#header {

background: url(‘images/header.png’) no-repeat left top;

width: 940px;

height: 120px;

}

#logo h1, #logo p {display:none;}

body

{

background: #ff9900

url(‘images/SchoolAssembly.jpg’) top center no-repeat;

}’
– there was the word #header missing, a { too much, and a typo in ShoolAssembly –
– as you know, css styles get applied in order of apearance, so the latest body background definition with the typo could have irritated IE. maybe other browsers are more forgiving.

Give me some more time, I am working on it.

here are changes I made in the style.css to get the design looking as I understood your idea:

#header {

    background: url(/images/header.png) no-repeat center top;	

    width: 940px;			

    height: 150px;
	margin:0 auto;		

}

#logo {display:none; }

#menu {

	width: 940px;

	margin: 0 auto;

	padding: 0;

	height: 44px; /*alchymyth: changed from 60px to 44px */
	overflow:hidden; /* added to get rid of gap between header and sidebars*/

	background: url(/images/img03.png) no-repeat left top; 

}

#wrapper {
 width: 940px; height:100%;

	margin: 0 auto;  margin-top:44px;

}

#sidebar1 {

	float: left;
	clear:left; /*alchymyth: added to let it float left*/

}

body 

{

background: #ff9900	

url('https://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/SchoolAssembly.jpg') top center no-repeat;

}

I suppose you could put this all at the end of style.css – no good programming, but it might work. or you could go through the style sheet and replace/repair the code where it was.

as always – no guarantee that it all works perfect first time.

Hello,

Mate what can I say that is fantastic – you are really good…!
All visible in all browsers and the gap reduced

Two issues only remain:

The header image / banner is still missing and the “wrapper” if that’s its called (the thing with the links in yellow) is shorter – I don’t actually mind this too much but I do need to add more links. So could you let me know how to adjust the length then I can increase decrease as required?

Thank you thank you thanks you – I’m sure I could never of done this on my own…!
All the best,
Dewi

my mistake, there shall be no / in front of images:

#header {
    background: url(images/header.png) no-repeat center top;
    width: 940px;
    height: 150px;
    margin:0 auto;
}

body
{
background: #ff9900 url(images/SchoolAssembly.jpg') top center no-repeat;
/*should be the short path, no http:*/
}				

#menu {	width: 940px;
	margin: 0 auto;
	padding: 0;
	height: 44px; /*alchymyth: changed from 60px to 44px */
	overflow:hidden; /* added to get rid of gap between header and sidebars*/
	background: url(images/img03.png) no-repeat left top;
/*same mistake with the image path, there must be no / in front of images*/
}

I only put the whole code in because I copy/pasted. You can just change the three bits with the image paths.
the space with the links on yellow background (what you called ‘wrapper’) will show hopefully now, and will extend anyway when you put more links in.

one more thing:

#page {	width: 940px;
	margin: 0 auto;
	padding: 0px 0px 10px 0px;
/*padding changed to get rid of gap between header and top of sidebar*/
}

I will keep watching this space.

PS: another thought: your backgroundpicture SchoolAssembly is extremely large – over 2000px wide, so most of your pupils will never be visible on the screens. what about making width and height of the image half the size, this will reduce the filesize to about a quarter, make the loading quicker, and show more students. to compensate for very long articles and still have a background, you could replace ‘no-repeat’ in the body { } style with ‘repeat-y’.

You really need to optimise that background image into something smaller, else anyone or dial-up or low level broadband it going to be waiting a while for the page just to load.

Try a few additional updates…

body { background:#f90 url('https://img18.imageshack.us/img18/7089/assembly.jpg') top center repeat;}

#menu { background-color:#F7D019;}

#menu a {padding:13px 24px;height:auto;line-height:20px;}

#menu li:hover, #menu a:hover {background:#000;}

#footer {height:50px;background:#282828;width:940px;padding:0;margin:0 auto}

#footer p {margin:20px;padding:0}

Add or update CSS lines as appropriate..

Change the body background though, download this image and use this instead.
https://img18.imageshack.us/img18/7089/assembly.jpg

It’s reduced to 1600 wide (that should account for people upto 22″ screens or so (give or take, depending on screen), i’ve also reduced the size quite a bit and made it a progressive jpeg.

It’s not the ideal kind of image to use as a background, but if you must use it ideally you should use a small version and fade out the image so it merges into the page… (i know that may not be within the scope of your skills, it’s merely a suggestion)..

Anyway, sorry for butting in there, see if the above helps at all..

Hello – thanks for butting in – what you are saying certainly makes sense, I have downloaded and swapped the image as you suggest.

I exchanged the code:
https://img18.imageshack.us/img18/7089/assembly.jpg ?

with:
https://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/SchoolAssembly.jpg

as the school surf control will not allow access to the site!
Obviously downloading and renaming your image first…!

I am really happy with how its starting to look now – the main issue now is the banner/header is not visible. IE has a cross in the top left position so it knows something is there its just refusing to read the image….?

Any ideas – suggestions would be really good…..?

Thanks again I do hope you understand how valuable help like this is – as you say ‘not within the scope of my skills’ is about right…! But I’m learning ….slowly… but still learning…

Cheers,
Dewi

sorry I spoke to soon – I swapped the url for

https://www.newporthigh.co.uk/wp-content/themes/pamphlet/Images/header.png

and its now visible – There is still an image on the top left which needs shifting – but its alot better…

Any ideas?

thanks,
Dewi

Yes apparently the image didnt’t exist.. *just clicked the link again and i now see your header image* …

Did you change something, because the header image is now there..? ??

I just changed the URL – the image is just the same…. it need changing I think..

Could you have a look at in Chrome or IE as there is (sorry for the crap terminology) but, there is a logo which shows an image cannot be read sitting over top left hand corner of the banner?

Many Thanks,
Dewi

Thanks to you all. I’m in the process of changing the appearance of my blog also and I can use all the information possible.

Yes that would be this bit..
<div id="splash"><img src="https://www.newporthigh.co.uk/wp-content/themes/pamphlet/images/img02.gif" alt="">&nbsp;</div>

Find the div with the id splash in the header.php of your theme and remove it, since you don’t need it..