Jump to content

Background image won't stay still!


ggkolfin

Recommended Posts

Hello all!

I am trying to make a main page with two background images: the first one should repeat vertically and horizontally and the second should be fixed in the upper right corner of the page. I have a login menu over the second background image. Also I have a regular image (not background) in the upper left corner of the page, and this is the logo of the site. My problem is that when I resize (size down) my browser's window the second background image moves to the left, and as I further size the browser's window down it keeps moving to the left until it completely moves below my logo. The login menu stays where it should, at the upper right corner of the page and as I resize the window I have to use the scroll bars to get to the menu (and this is what I want). How can I make my second background image stick to the upper right corner and not moving left on resize???

Here is the body of html:

<body> <div id="holderDiv" style="min-width: 1024px; margin: 0 auto;">     <div id="headerDiv">        <div id="logoDiv">            <img src="logo.png" width="562" height="396" align="left"  />        </div> <!--end of logoDiv -->        <div id="loginDiv">            <form action="login.php">            <input type="text" name="usernm" placeholder="Username" /><br />            <input type="text" name="passwd" placeholder="Password" /><br />            <input type="submit" value="login" />             </form>        </div> <!--end of loginDiv -->     </div> <!--end of headerDiv -->      <div id="contentDiv">       <!-- some things here -->   </div> <!--end of contentDiv -->    <div id="footerDiv">       <!-- some more things here -->    </div> <!--end of footerDiv --> </div> <!--end of holderDiv --> </body>

And this is the css:

 html { height: 100%; }body { background-image: url("wood.png"), url("back.png") ; background-repeat: no-repeat, repeat;        background-position: right top, left top; height: 100%; margin: 0; padding: 0 px;        font-family:"Courier New", Courier, monospace; }#holderDiv { min-height: 100%; width: 100%; position: relative; }#logoDiv { float: left; margin-right: 5%; display: inline-block; overflow: hidden; } #loginDiv { float: right;  margin-top: 5%; margin-right: 5%; display: inline-block; overflow: hidden; }#contentDiv { width: 80%; height: 70%; margin-left: 10%; margin-right: 10%;  margin-bottom: 5%;               background-color: #fff; display: inline-block; overflow: hidden; }#footerDiv { width: 100%; height: 10%; background-color: #99ffcc; display: inline-block; overflow: hidden; } 

Can anyone help please? I have tried several things suggested online for what appears to seems a similar problem but nothing worked so far!

Thanks in advance,

Georgia

Edited by ggkolfin
Link to comment
Share on other sites

No clues at all? I am really struggling with this! I have tried a ton of things, but nothing seems to work. The second background image keeps coming left on resize. The only think that make it stick to the right top corner is if I remove the second background image from the body style and add it to the header style:

#headerDiv { width: 100%; height: 600px; /*as the height of the image*/ display: inline-block; overflow: hidden; background-image: url("wood.png"); background-repeat: no-repeat; background-position: right 0px top; }

But now the header is too big, because I set the height to be 600px, so the content bellow the header is pushed down too much! But if I change height to something smaller then the bottom of my image is cropped!!!

 

Anyone please??? I could really use some help here!

Georgia

Edited by ggkolfin
Link to comment
Share on other sites

I finally changed my second background image so that it can fit the header without exceeding the height I wanted for the header. I guess there is no way to make it stick to the upper right corner of the page whilst in the body: the top right of the body is supposed to be the top right of the viewport.

Edited by ggkolfin
Link to comment
Share on other sites

You can try to place images in separate containers, then give second image container a min-width: that will prevent second background image going UNDER the logo? (i think that's what you mean). It should stop at this width along with login menu.

Link to comment
Share on other sites

Thank you for your answer!

Placing the two backgrounds in two separate containers did work without requiring min-width to be set. I placed the first background in body and the second in header div. My only problem was that because my second background image was too high, the header was either too high or (if i set the header to be as high as I wanted) the bottom of my background image was covered by the content div, which is right bellow header div. I ended up redesigning the second background image, and although it required some photoshop labor time, I am very happy with the end result.

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...