Перейти к содержимому

Реферальная программа Мегаплана

Выбрать шаблон и создать сайт

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

#1 hnerd

hnerd
  • Пользователь
  • 284 сообщений
  • Репутация: 18
0

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

8j-5CgbnAm8.jpg

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

 

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


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как сделать дизайн сайта?
  2. Как вобще такое можно сделать?
  3. Различный фон
  4. [Вопрос] Как сделать такой фон?
  5. Не получается сделать, чтобы фон повторялся, а не растягивался

#2 Алия

Алия
  • Пользователь
  • 42 сообщений
  • Репутация: 10

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

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

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

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

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

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


  • 0

#3 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

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

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


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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 с прозрачностью, чтоб общий фон был под ними виден.

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

  • group.jpg
  • fara.jpg

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

  • 0


Оформление форума – IPBSkins.ru