[Помогите] Установить правильно фон

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Frenzo, 17 дек 2013.

  1. Frenzo

    Frenzo

    Регистрация:
    16 дек 2013
    Сообщения:
    11
    Симпатии:
    0
    Здравствуйте.
    Не ссудите строго, я только начал заниматся версткой.
    Возник такой вопросс, я в CSS прописал фон сайта (картинкой) но почему то эта картинка отображается больно близко и весь сайт не видно. А если ставить другое разрешение экрана то она вовсе уходит в другой в угол. Помогите, может есть какие нибудь секреты?
     
  2. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    ну что за люди... в поиске набрать уже лень "Подстройка размера изображения под разрешение экрана средствами CSS"
    Код:
    html {
      background: url(images/bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    второй способ
    Код:
    #bg {
      position: fixed;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
    }
    #bg img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      min-width: 50%;
      min-height: 50%;
    }
    
    <div id="bg">
      <img src="images/bg.jpg" alt="">
    </div>
     
  3. Frenzo

    Frenzo

    Регистрация:
    16 дек 2013
    Сообщения:
    11
    Симпатии:
    0
    В том то и дело, что все равно фон не встает.
    Вот как должно:
    [​IMG]

    А вот как у меня:
    [​IMG]
     
  4. engineer_pro

    engineer_pro

    Регистрация:
    2 апр 2013
    Сообщения:
    91
    Симпатии:
    12
    например:
    белый лист посередине это body
    прописывай внутри боди
    top: 30px !important;
    bottom: 30px !important;
    или
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    и радуйся
     
  5. Frenzo

    Frenzo

    Регистрация:
    16 дек 2013
    Сообщения:
    11
    Симпатии:
    0
    Прописал я, просто не чего не изменилось
     
  6. engineer_pro

    engineer_pro

    Регистрация:
    2 апр 2013
    Сообщения:
    91
    Симпатии:
    12
    ты в каком файле это прописал
    index.php ?
     
  7. Frenzo

    Frenzo

    Регистрация:
    16 дек 2013
    Сообщения:
    11
    Симпатии:
    0
    Нет в index.php я указал путь к CSS
    А прописал я в style.css
     
  8. Scholes

    Scholes

    Регистрация:
    16 дек 2013
    Сообщения:
    20
    Симпатии:
    2
    А у тебя белый лист является картинкой? Или это div? (
    Код:
    <body>
    <div class="page"> <!-- Содержание страницы-->...</div>
    </body>
    )

    Если это div, то пропиши в css, что-то подобное:

    Код:
    div.page{
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    а для body сделай бэкграундом свою картинку.
     
  9. Frenzo

    Frenzo

    Регистрация:
    16 дек 2013
    Сообщения:
    11
    Симпатии:
    0
    Картинкой все
     
  10. Scholes

    Scholes

    Регистрация:
    16 дек 2013
    Сообщения:
    20
    Симпатии:
    2
    А какие размеры картинки? Можешь дать ссылку на сайт, где можно посомтреть?

    У тебя она возможно обрезается под твое разрешение монитора. Скорее всего из-за того, что выставлено
    Код:
    background: url(images/bg.jpg) no-repeat center center fixed;
    Может быть тебе лучше сделать белый лист дивом?
     
  11. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Ну давайте разберем.
    1. Размер картинки должен соответствовать размеру окна в котором он стоит. Если фон применяется для тега body, то обычно его размеры равны width=100%, height=100%. Картинка займет всю выделенную область окна.
    2. У Вас есть 2 внутренних окна - фон + белая область под контент. Белая область должна тянуться при заполнении контентом, поэтому нужно продумать структуру.
    Пишу код:
    Код:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    </head>
    <body>
    <div id="wrapper">
    
    </div>
    </body>
    </html>
    Теперь стили:
    Код:
    *{
    margin:0;
    padding:0;
    }
    body{
    font-size:12px;
    background:url('../image/bg.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    }
    #wrapper{
    width:980px;
    margin: 50px auto;
    background:url(../image/bg-wrapper.png) repeat-x 0 bottom
    min-height:100px;
    }
    
    Вот и все.