Resizable background Image Problems

[EIGHTWGT]

Hello people… It is my first post on this forum. FYI, I am a pretty new web designer and was inspired by Chris’s article on the resizable background image and liked it so much I did it to my website. Here is the problem. It was working fine for the last month and I started to get a rapid drop in page rank on google and started looking into my code for errors, bad links, etc.. after someone on another forum said they got an error on my homepage "forbidden" which I didnt understand how…then I checked page with firefox webmaster tools – and validate links..I got a 403 error in relation to the background image and wondered if it was source of problem and messed with it….anyway I was messing around with my index page and I cant figure out for the life of me what I did but the image now does not resize….

The page is http://www.inshorepowerboats.com

But this one works http://www.inshorepowerboats.com/NEW%20 … GROUND.htm

I cannot see the mistake i made from one to the other …

Please help.

Thanks

[Chris Coyier]

I’m getting the 403 problem on both links from two different connections.. something is obviously very wrong. If it was a linux server, I’d believe it was in the .htaccess file, but your error page indiciates it’s IIS (Windows) and I don’t know the equivalent configuration file.

What kind of hosting are you on, shared? vps/dedicated? It’s worth putting a ticket in with your host if you’re not sure how this has happened.. but I would be very surprised if this wasn’t the reason for your dramatic PR drop. Something is blocking most, if not all, IPs from your site.

[EIGHTWGT]

Jay

WOW- Someone else on another forum told me about this and I thought he was nuts…. I have had countless problems with the hosting company (small local company)

I need to find a new company to host my websites…..

I forwarded what you said to the tech support guy…. I’ll post his reply.

Thanks

[EIGHTWGT]

He responded to your reply I sent him

"We do not block any traffic across the network Tom I would say it is bad code that is causing this problem. "

[Chris Coyier]

I’ll try a 3rd connection when I get home to see if I can get any access to the site, and also run some traceroutes and the like to see if it’s possible to narrow down what could be causing it. As stated earlier, I really know absolutely nothing about IIS as I’ve hosted on *nix systems for years and years, and would only have need for Windows hosting if I use ASP (which I’ve no real interest in).

It might be worth putting a copy of your index page’s source code here, there might be something inside that that could be triggering this problem. It would be interesting to know how many people are able to see the site compared to how many people can’t.

If you’ve not been told the full error, it is as follows:

Quote:

You are not authorized to view this page
The Web server you are attempting to reach has a list of IP addresses that are not allowed to access the Web site, and the IP address of your browsing computer is on this list.

Please try the following:

* Contact the Web site administrator if you believe you should be able to view this directory or page.

HTTP Error 403.6 – Forbidden: IP address of the client has been rejected.
Internet Information Services (IIS)

Technical Information (for support personnel)

* Go to Microsoft Product Support Services and perform a title search for the words HTTP and 403.
* Open IIS Help, which is accessible in IIS Manager (inetmgr), and search for topics titled About Security, Limiting Access by IP Address, IP Address Access Restrictions, and About Custom Error Messages.

MS.com offers this page as advice on how to fix it, do you have access to the areas it’s talking about?

[AshtonSanders]

The site works fine for me.

Have you tried copying the new page onto your current page?

btw, normally you’ll get a 403 error if you are directed to a folder/directory (ending with a "/" instead of a file like "name.htm") and it can’t find a proper index page.

In your htaccess (on a linux server) you can add this code to determine what directory page will be returned:

Code:

DirectoryIndex filename.html

[apostrophe]

I’m getting the same ‘not authorized’ message as JayX on both links.

[EIGHTWGT]

Remember – my background isnt resizing on this page which was main reason for this post but the error is a VERY big issue also, that I thought may be related…anyway guys…HERE IS index.html code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<title>Shallow water skiffs by Inshore Power Boats </title>

<meta name="keywords" content="skiff,,shallow water skiffs,fishing boats,flats boats,flats fishing boats,skiff,flats fishing skiffs,"/>
<meta name="description" content="Inshore skiffs and flats boats for all types of shallow water fishing"/>
<meta name="robots" content="index,follow,all"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="NEWSTYLE.css" />

</head>

<body>

<img id="background" src="../LARGE-BG-IMAGE2.jpg"alt="Large Background" name="background" style="width: 1722px" height="896" /> <!– menu –>

<!– menu –>
<ul id="menu">
<li><a href="SKIFFS.html">SKIFFS</a></li>
<li><a href="inshore162.html">INSHORE 16</a></li>
<li><a href="17GUIDE.html">17 GUIDE</a></li>
<li><a href="17XS.html">17XS</a></li>
<li><a href="pricing.html">PRICING</a></li>
<li><a href="articles2.html">ARTICLES</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="NEWS.html">NEWS</a></li>
</ul>
<!– /menu –>

<div id="data">
<p>From the build it your way 16, to the world class 17XS poling skiff, we are sure you will find that Inshore Power Boats builds
shallow water skiffs that fit the needs of part time fisherman or the most
demanding fishing guides.</p>
</div>

</body>

</html>

Here is the css

/* CSS layout */

#page_content {
margin-left: 200px;
}

#container {
position: relative;
width: 100%;
}
#background
{
width: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;

}
#testbox{
width: 100%;
height:100%;
position: relative;
}

#menu li{
display: inline;
text-transform: uppercase;
font-size: 1.1em;
line-height: 1.0em;
font-weight: bold;
padding: 0 10px 0 10px;
color: #FFFFFF;
text-decoration: none;

}
#data{
width: 190px;
height: 200px;
margin: 20px;
position: absolute;
bottom: 150px;
color: #FFFFFF;
font-size:1.3em;
}

[Chris Coyier]

Hmm, I wonder if that "../LARGE-BG-IMAGE2.jpg" is what’s causing our problem with viewing it. Presumably this file will be outside of the web viewable folder and could be triggering the 403. Maybe changing it to "images/LARGE-BG-IMAGE2.jpg" would help, and putting the file in folder with web readable permissions called ‘images’ off the html root.

I’ll have to look up the article with regards to the background image resizing, but for background images it’s often a lot easier to put the source elements in the CSS itself, rather than the markup.

For future notes, I would keep your filenames restricted to lowercase and alphanumeric characters, having %20s in your links isn’t great form and might be contributing to the PR dive too. There’s a great article on 30 tips for writing markup on http://www.nettuts.com at the moment which has some excellent pointers (altho doesn’t specifically mention filenaming schema).

[EIGHTWGT]

Jay

Thanks… I’ll wait to here more from you. I cannot figure out why the code above does not work in regards to the BG image resizing…

I am just too new at all this to figure it out as I am in brain overload… What takes you 10 minutes to do, may take me 3 hours…

Thanks man….

[Chris Coyier]

Woo, it works :)

It definitely wasn’t at home earlier either, and I passed the link to 3 others.. 1 of which could bring it up whilst 2 couldn’t. How very strange. I see you’ve commented out the background image section that was part of your original code and I’m guessing this might’ve been the problem? I’m defo putting that one down to being a lucky guess on my behalf if that’s the case!

Is it now acting the way you want it to? Hopefully your PR will go back up now the site seems to be running as it should. Alas, Googles rechecking behaviour can’t be predicted easily so it might take a little whilst to reflect it’s online status.

[EIGHTWGT]

Im working on it at the moment but lost….

I cant get the background image to scale – it only does in one direction – AND my nav menu is out of site on bottom and cant get it where I want it (due to my obvious lack of CSS skill)

Something is wrong somewhere….

Dang…. this is startin to give me a headache…. :(

CSS is great until you try a technique you do not understand and apply it to a website…..then have it go wrong… :oops:

[AshtonSanders]

"EIGHTWGT" wrote:

CSS is great until …:

:o ALWAYS! IT’S ALWAYS GREAT!

:lol:

[Chris Coyier]

I think one of the most important things when it comes to (X)HTML/CSS etc is really nailing the fundamentals. Most of my work has been running prewritten PHP/SQL scripts for years, so I’ve been seriously lazy on the self development side, but decided I didn’t want my new all singing all dancing site to be another WordPress clone, and am therefore writing the frontend from scratch.

So I’ve gone into my project knowing what’s possible in what languages (to a degree anyway!) and the bits ofs knowledge buried deep down that just need to be refreshed by reading as many tutorials as possible. I really would suggest grabbing a book you get on with rather than just relying on tutorials, as a good book will take you through each stage in a logical order as opposed to just being a "Here’s something cool I thought of today!". Nothing wrong with those tuts at all, in fact they’re fantastic and keep you on the cutting edge, but you need to have the solid foundation down first.

I read a bunch of sample chapters of different books until I could find one I felt I gelled with the most. In the end the one I gave most of my attention to the one written by the guys at http://www.htmldog.com , it might not be for you but it’s worth looking over their site. Most of these books will hammer home about the right way to write code. You’ll have far less problems when you know exactly what part of your code is incorrect. Properly laying out, using standard filenaming convention, semantic naming schemes, completely stripping your markup of layout.. it all goes a long way, especially when you have problems and need to debug your code. As said earlier, you’re far better off stripping the capitals and spaces out of your filenames, because it’s far easier to remember "Is it BG-Image or Bg-Image" when you know due to your naming scheme it MUST be "bgimage".

Anyway! On to the background issue, I take it you want the image to fill the background from corner to corner, even when you resize the window frame? The problem with doing that is the user is easily able to bend the image out of shape so it distorts. Is this the kind of effect you’re looking for? Or am I misreading you?

[Author]

Posts