Help my top header image won't adjust to page?

[cadalist]

If you go to ucsutah.com

 

You will see my top image header won't adjust to different size resolutions, i think its set to 1024X768 and below that everything else adjusts to any resolution.

 

I am using HTML Template for BTS.

 

Any suggestions that i can fix this problem?

 

thanks in advance

[ELnew]

What is the name of your stylesheet, and what folder is it located in?

[cadalist]

Its in /ucs/templates/HTML/stylesheet.css

[ELnew]

Didn't really see anything wrong. I saw this and want to warn you.

 

background-image: url('http://www.ucsutah.com/ucs/images/imagesnew/top2.jpg);

 

Make sure it's like this

 

background-image: url('http://www.ucsutah.com/ucs/images/imagesnew/top2.jpg'); <---- I added the ' after the url

 

In the future that will come back to bite ya.

[germ]

If you install SSL even that will bite you.

 

It should be:

 

background-image: url('images/imagesnew/top2.jpg');

The browser takes this from the HTML source:

 

<base href="http://www.ucsutah.com/ucs/">

Then adds the code in the style sheet, so the path becomes:

 

background-image: url('http://www.ucsutah.com/ucs/images/imagesnew/top2.jpg');

That's where it actually gets the image from.

 

After you install SSL, the <base href=... usually changes to:

 

<base href="https://www.ucsutah.com/ucs/">

But the "relative" link to the image will still work.

;)

 

No images should be hard coded with a "http:" prefix, not even in the stylesheet.

[Guest]

If you go to ucsutah.com

 

You will see my top image header won't adjust to different size resolutions, i think its set to 1024X768 and below that everything else adjusts to any resolution.

 

I am using HTML Template for BTS.

 

Any suggestions that i can fix this problem?

 

thanks in advance

The picture is one size. It is not going to change its size based on users screen resolution. The only to do that is to have pics for all resolutions and then display them using javascript after you detect the screen res.

 

That being said, its not screen res you need to check for rather browser width. Something like

<script type="text/javascript">
<!--

function windowWidth(){

if (window.innerWidth){
	if (document.body.offsetWidth){
		if (window.innerWidth!=document.body.offsetWidth)
			return document.body.offsetWidth;
		}
	return (window.innerWidth);					 // Mozilla
}


if (document.documentElement.clientWidth)
	return document.documentElement.clientWidth;	// IE6


if (document.body.clientWidth)
	return document.body.clientWidth;			   // IE DHTML-compliant any other
}

//-->
</script>