Slybin Posted September 3, 2014 Share Posted September 3, 2014 (edited) Hi all, I'm helping the local chapter of Trout Unlimited with their web site and I was able to fix all of the problems with the help of w3schools. Now I have a problem with the header, I'm replacing the background with a png image of 1080px by 200px and the banner get truncated if I resize the browser. The header consist of a background, 2 logos, some text and also the menu bar is superposed on the header. The old banner was a simple backgroud that was repeated: From style.css for the old banner: line-height: 1.50; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #636363; background: #FFF url(../img/back.png) repeat-x; Now, I'm trying to put an image but the image get truncated when I resize the browser but the logos, the text and the munu bar are ok. From style.css for the new banner: line-height: 1.5; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #636363; background: #FFF url(../img/back.png) no-repeat center top scroll; What should I do for the banner to stay? If you need more info, let me know? Thanks in advance, Serge Edited September 11, 2014 by Slybin Link to comment Share on other sites More sharing options...
Ingolme Posted September 3, 2014 Share Posted September 3, 2014 The first step is making sure your HTML is valid. Correct the errors shown here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.chateauguayriverchapter.com%2F Instead of putting the header's background image on the <body> element, try putting it on the header itself. The body is being limited in width while the header has been allowed to extend further out. Link to comment Share on other sites More sharing options...
Slybin Posted September 3, 2014 Author Share Posted September 3, 2014 Thanks a lot Ingolme. Moving the background image to the header instead of <body> element fixed it. I already had some knowledge of perl and python but helping them on their web site is really fun, now I'm learning html, css. I really enjoy the w3schools web site, I have done a lot of reading and learn a lot. Now I will make sure that my html is valid. Thanks again. Serge Link to comment Share on other sites More sharing options...
srinivas g Posted September 7, 2014 Share Posted September 7, 2014 This is Browser compatibility related issue before u host the website check whether it is compatible to major browsers or not later u host ... i checked it is working perfectly in chrome. Whatever Solution is there .. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2014 Share Posted September 7, 2014 There is no browser compatibility issue, all css is just your normal css1 to css2 styling, the only problem was not placing the background image in the ideal element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now