1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

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

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

  1. Frenzo

    Frenzo

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

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    18
    Симпатии:
    1
    ну что за люди... в поиске набрать уже лень "Подстройка размера изображения под разрешение экрана средствами 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>
     
    web2us, 17 дек 2013
    #2
  3. Frenzo

    Frenzo

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

    А вот как у меня:
    [​IMG]
     
    Frenzo, 17 дек 2013
    #3
  4. engineer_pro

    engineer_pro

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

    Frenzo

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

    engineer_pro

    Регистрация:
    2 апр 2013
    Сообщения:
    100
    Симпатии:
    13
    ты в каком файле это прописал
    index.php ?
     
    engineer_pro, 17 дек 2013
    #6
  7. Frenzo

    Frenzo

    Регистрация:
    16 дек 2013
    Сообщения:
    11
    Симпатии:
    0
    Нет в index.php я указал путь к CSS
    А прописал я в style.css
     
    Frenzo, 18 дек 2013
    #7
  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 сделай бэкграундом свою картинку.
     
    Scholes, 19 дек 2013
    #8
  9. Frenzo

    Frenzo

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

    Scholes

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

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

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Ну давайте разберем.
    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;
}
    Вот и все.
     
    alex_storm, 21 дек 2013
    #11
< Кто в чем верстает? | Полезные ресурсы для верстальщиков >