Как сделать такой фон?

#1 hnerd

Неактивные
284 сообщений

Репутация: 18

Отправлено 14 Декабрь 2014 - 15:40

Этот предмет, который выделен синей рамкой - не вмещается в экран в 980px. Как сделать так, чтобы он находился на том месте, на котором сейчас находится, а при уменьшении экрана просто был как задний фон и, при уменьшении экрана до 980px - не был видимым и чтобы внизу не появлялся скроллинг из-за него. И как сделать, чтобы при любом разрешении экрана он был на тем месте, на котором находится.

И еще, когда делаю background-position не 0 0, а другие параметры - то фон просто исчезает. Не пойму, в чем дело.

robot

Пользователь PRO
2 652 сообщений

Репутация: 85

Советую обратить внимание на следующее:

#2 Алия

Неактивные
42 сообщений

Репутация: 10

Отправлено 21 Декабрь 2014 - 02:24

Без кода страницы недостаточно информации для адекватного совета.

Если обозначенный элемент - отдельная картинка, можно попробовать разместить её сразу после body, например,

<body><img src="вашакартинка.png" style="position: relative; top:100px; left:-550px;">

Картинка сдвинется влево и не будет скроллиться.

Куда при этом сдвинутся другие картинки и блоки и как их вернуть на место - отдельный вопрос.

#3 TimurR

Пользователь PRO
906 сообщений

Репутация: 209

Отправлено 21 Декабрь 2014 - 11:50

Посмотрите код bootstrap, там есть ответы на Ваши вопросы. Действительно без кода страницы трудно ответить, но можно поступить следующим образом. Создать div, задать ему размеры этого изображения и задать это изображение как фон для этого дива. Дальше при помощи медиазапросов в CSS задать правило, при котором если экран пользователя меньше чем n-пикселей, то этот див скрывать.

Разработка сайтов.

#4 yury

Пользователь
642 сообщений

Репутация: 188

Отправлено 24 Декабрь 2014 - 15:43

hnerd,

можно как-то так сделать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>tst</title>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
#main{
    position: relative;
    background: url(group.jpg) 50% 100px no-repeat;
    min-width: 900px;
    height: 500px;
}
h2{
    font: normal 24px Arial, "Nimbus Sans L", Helvetica, sans-serif;
    text-align: center;
}
#pp{
    position: absolute;
    left: 50px;
    top: 50px;
    display: block;
    background: url(p1.jpg);
    width: 250px;
    height: 250px;
}
#rr{
    position: absolute;
    right: 50px;
    top: 50px;
    display: block;
    background: #ddd;
    padding: 20px;
    width: 210px;
    height: 210px;
}
#rr h3{
    font: normal 20px Arial, "Nimbus Sans L", Helvetica, sans-serif;
    text-align: center;
}
</style>
</head>
<body>
<div id="main">
    <div id="pp"></div>
    <h2>Выездная фотостудия бла бла бла</h2>
    <div id="rr"><h3>Новогодняя акция</h3></div>
</div>
</body>
</html>

Поскольку исходных картинок вы не дали, в примере были использованы первые подвернувшиеся group.jpg (с группой людей) и fara.jpg (с лампой), см ниже. Само собой в реале нужно использовать картинки в формате png с прозрачностью, чтоб общий фон был под ними виден.

Прикрепленные изображения

Сообщение отредактировал yury: 24 Декабрь 2014 - 15:46