Link to home
Start Free TrialLog in
Avatar of Peter Chan
Peter ChanFlag for Hong Kong

asked on

Adjust the position

Hi,
I want to re-position the whole picture into center of the page, while still keeping everything like buttons, texts and other objects, still in the 'same' position on top of the picture file. What to adjust?
http://my-friend.co/Main/Default.aspx
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

The problem is your width and height. It is creating a box that is constraining the image.

If you want to cover the background then you need to do the following

Remove the width and height elements on this
<div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:100%;">

Open in new window

Make it
html, body, #main_form {
   height: 100%;
}
.container {
  background:url('../pict/ID-10028343.jpg') no-repeat center center;
  height: 100%;
  background-size: cover;
}

Open in new window

Avatar of Peter Chan

ASKER

I put these
     <div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; ">
...
html, body, #main_form {
   height: 100%;
}
.container {
  background:url('../pict/ID-10028343.jpg') no-repeat center center;
  height: 100%;
  background-size: cover;
}

Open in new window

but the picture file is too small shown on the Web page.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial