bherzberg96 Posted January 8, 2013 Share Posted January 8, 2013 (edited) Hi, I'm designing a website for a competition and my site consists of a banner with a navigation bar in it with text and information running down the webpage. The background is a yellow-colored image and the text runs down the page in an 80% wide white table. I have the background CSS as so: body { background-image:url(assets/backgrounds/background.jpg);background-repeat:no-repeat;background-attachment:fixed;background-size: 100% auto;margin:0} When I shrink the browser horizontally, the background scrunches up at the top of the page, revealing white space all underneath it. The banner also appears very large with its buttons (navigation bar), which are 150 pixels wide an 75 tall each. I'd like to know if there's any way I can make the background conform better to the changing width of the browser and if there's a way I can have the banner and its buttons shrink when the browser shrinks as well. Also, when the browser's width is small, I'd like the table of information to be 100% and leave no yellow showing on the sides, since then it just looks unprofessional. A good example of what I'd like to be able to do can be seen at WordPress.com. When you shrink the browser's width, the buttons will rearrange and shrink to make the user interface still applicable. Also, the background conforms nicely to the shrinking of the browser's width. I appreciate any help I can get and if anybody's really confused by how I explained the layout of my website and the issues I'm running into with it, I can post pictures up of some of the issues I'm running into. Thanks!! Edited January 8, 2013 by bherzberg96 Link to comment Share on other sites More sharing options...
knystrom18 Posted January 11, 2013 Share Posted January 11, 2013 Do you have a link to the site you're having trouble with? It'd be easier to understand and troubleshoot with one. You'll probably want to look at CSS Media Queries: http://css-tricks.com/css-media-queries/ 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