So my site looks great in Firefox but in Internet Explorer the headers on the about, projects, and contact break down and look extremely funky, which I think is a result of the backgrounds not stretching to fit the page. Also the backgrounds on the people and portfolio pages dont stretch to fit the page. They fit the page fine in Firefox.
I have little knowledge of making sites cross browser compatible and was hoping there was an easy fix or solution to my problems such as an Internet explorer fix to make the backgrounds stretch to fit.
Hi, you are using the css3 background-size property which is not supported in IE8 and under so the background will not stretch. There is no simple fix and you should probably look at a repeating, or oversized image for IE8 and under.
There are js fixes for this or you can position an thnl image with absolute (fixed positioning) in the foreground and stretch it across the page but both methods are to be avoided if at all possible. Just use a different image for ie8 and under and pass it via conditional comments.
Your 2 transparency divs are also misplaced as you can’t have a div in a header nor have a div as first-child of a ul. The div in the h1 needs to be outside it as should be the div after the opening ul. (If you need to create a stacking context then you could wrap them all in a div if needed.)
Don’t use breaks to make paragraphs. Use the “p” element as that’s what it is for
