1 Replies - 1162 Views - Last Post: 15 September 2011 - 03:21 AM

#1 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 178
  • Joined: 18-May 11

How to get rid of horizontal scrolls upon browser maximize.

Posted 15 September 2011 - 01:25 AM

Good day folks. Well the heading kind of summarizes the problem. Im trying to design one of those pages where the background image is fixed in place, and only the content that appears over the background can be scrolled up on down. The screenshot below should give you the idea.


Posted Image


Well to achieve this, I set the background with a z-index of -1, and give it a fixed position as seen in the css below. The background image is given a fixed height in pixels, and a width of 100% ( if I specify a fixed width in pixels, there will be an extra white space to the right of the background image with a scroll bar which increases the effective width of the screen). Well when the background image is given a 100% width, it fills the extra white space but the scroll bar is still present and the width of the page is still larger than the browser width. To fix this I give the body element ( parent to both the background and the foreground elements)an overflow-x value of hidden which gets rid of the problem. Everything looks like I want it to except that a new problem arises. When I resize the browser window (make it smaller), the scroll bars don't appear either and so, I can't move the page contents around from left to right. I need to always have it maximized to show all the contents. Who can suggest any tweaks or tricks to get the page looking like I want it to (ie have the background to assume a width that is no greater than the monitor width with no scroll bars when maximized)?

Here is a simplified version of the html and css, showing the elements involved.




<html>


        <head> 



		<title>Club Scene</title> 
 

		<style>
		#background {z-index:-1;height:1024px;width:100%;margin:auto;
                             position:fixed;left:0px;bottom:0px; background-image:url('images/club_wallpaper.jpg');
                             background-repeat:no-repeat;}

                 #foreground{height:1590px; width:1000px;margin:auto; }

		</style>



	</head>





	<body style = "overflow-x:hidden;"> 


		<div id = "background"> </div>


		<div id = "foreground"> a whole lotta content </div>

        </body>

</html>





Is This A Good Question/Topic? 0
  • +

Replies To: How to get rid of horizontal scrolls upon browser maximize.

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: How to get rid of horizontal scrolls upon browser maximize.

Posted 15 September 2011 - 03:21 AM

Hey.

You could fix this by not creating a div for the background image, but rather putting it directly on the body element. Then, to get it to stay fixed while the content scrolls, you could create a wrapper element inside the body with a fixed, maximized position. The scroll bars would then appear when the content overflows the window, but not really be attached to the window itself but rather the wrapper element.

Something like:
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            body {
                background: rgb(0, 0, 0) url(back_img.jpg) 50% 0% no-repeat;
            }
            #main_wrapper {
                position: fixed;
                top: 0px; bottom: 0px;
                left: 0px; right: 0px;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="main_wrapper">
            <p>Insert content here!</p>
        </div>
    </body>
</html>


The background image would be fixed at the top of the page, but would stay centered horizontally when the window is resized. If the window gets larger than the background image, the background color, specified there as rgb(0, 0, 0), would show. If you don't want that you'd have to change no-repeat to repeat-x.

This post has been edited by Atli: 15 September 2011 - 03:22 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1