locked
Align the whole page 'to' the center RRS feed

  • Question

  • User364663285 posted

    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

    Sunday, December 4, 2016 9:18 AM

Answers

  • User-1838255255 posted

    Hi wmec,

    If you want to align the whole page to the center, you can add margin:0 auto;

    <div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:1220px; background-size:100% 
    100%;margin:0 auto">

    If you want make image cover the div, I think it must be stretched. The only way is you must change the originally quality of the image!

    Best Regards,

    Eric Du

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 5, 2016 12:56 PM

All replies

  • User1564875471 posted

    You will have to set the image width to 100% instead of having a static width:

     Height:780px; Width:100%; background-size:100% 100%;

    Please note that this will also have a side effect because it will apply image scaling and so on big screen sizes the image might appear stretched.

    Sunday, December 4, 2016 10:47 AM
  • User364663285 posted

    Hi,
    I've tried your way there but then the picture file had been stretched, but REALLY do not expect to stretch the picture file and ONLY to center it on the Web page.

    Sunday, December 4, 2016 2:18 PM
  • User-158764254 posted

    try setting your style like this:

    style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:1220px;"

    Sunday, December 4, 2016 2:41 PM
  • User364663285 posted

    Hi Mike,

    I've done what you advised but the picture file is still being shown on the left-most side of the web page.

    Sunday, December 4, 2016 2:55 PM
  • User-158764254 posted

    You missed a change - it seems you left background-size in the style. go ahead and remove that. 

    Sunday, December 4, 2016 2:58 PM
  • User364663285 posted

    I put this

    <div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:1220px;">




    but the picture file is becoming very small.

    Monday, December 5, 2016 1:50 AM
  • User-1838255255 posted

    Hi wmec,

    According to your description, I make a adjust in F12, I notice that the width of the div is 1220px and top. So the image is show at the center of the div, not the page. You could adjust the div width to 100%, don't need change width of the image, you will see the image show at the center of the page, also image will not be stretched!

    Here is the result:

    Best Regards,

    Eric Du

    Monday, December 5, 2016 2:58 AM
  • User364663285 posted

    How to adjust the options of the line?

    Monday, December 5, 2016 4:25 AM
  • User-1838255255 posted

    Hi wmec,

    I am not clear the meaning of options of the line, I hope you can explain more or show in image! 

    Best Regards,

    Eric Du 

    Monday, December 5, 2016 5:11 AM
  • User364663285 posted

    I want to keep the picture file in the expected size and position it in the middle of the page. How?

    Monday, December 5, 2016 6:36 AM
  • User-1838255255 posted

    Hi wmec,

    According to your description, you can modify code like this:

    Replace

    <div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:1220px;">

    with

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

    This code meaning is modify div width from 1220px to 100%, image will show at the center of the page also keep image originally size!

    Best Regards,

    Eric Du

    Monday, December 5, 2016 9:08 AM
  • User364663285 posted

    No, the picture file size is too small below, after having applied your change.
    http://my-friend.co/Main/Default.aspx

    Monday, December 5, 2016 9:17 AM
  • User-1838255255 posted

    Hi wmec,

    According to your description, I look up the size of the image when width in 1220px and 100%, here is the test screenshot:

    1220px;

    100%:

    The size of image don't changed when in 1220px and 100%! So if you have other requirement, please tell me more detail!

    If you think image size is too small, you can change originally width and height of the image in paint software!

    Best Regards,

    Eric Du 

                                                                                                                            Please drag scroll bar to right side then check the size of the image

    Monday, December 5, 2016 9:48 AM
  • User364663285 posted

    I put this

    <div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:1220px; background-size:100% 100%;">



    and the picture file is big enough below.
    http://my-friend.co/start4/Default.aspx

    but ONLY I expect to align the WHOLE PICTURE FILE INTO CENTER of the Web page. This is the only requirement!

    Monday, December 5, 2016 10:08 AM
  • User-1838255255 posted

    Hi wmec,

    If you want to align the whole page to the center, you can add margin:0 auto;

    <div class="container" style="background:url('../pict/ID-10028343.jpg') no-repeat center top; Height:780px; Width:1220px; background-size:100% 
    100%;margin:0 auto">

    If you want make image cover the div, I think it must be stretched. The only way is you must change the originally quality of the image!

    Best Regards,

    Eric Du

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 5, 2016 12:56 PM