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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 84 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #5

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 hnerd

hnerd
  • Неактивные
  • 284 сообщений
  • Репутация: 18
0

Отправлено 14 December 2014 - 15:40

8j-5CgbnAm8.jpg

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

 

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


 

 

  • 0

#2 Алия

Алия
  • Неактивные
  • 42 сообщений
  • Репутация: 10

Отправлено 21 December 2014 - 02:24

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

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

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

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

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


  • 0

#3 TimurR

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

Отправлено 21 December 2014 - 11:50

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


  • 0

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



#4 yury

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

Отправлено 24 December 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 December 2014 - 15:46

  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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