Jump to content

How to make the site and its content shrink with the browser


Recommended Posts

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 by bherzberg96
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...