Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 16.05.2019, 19:35   #1
AndreStels
Новичок
 
Регистрация: 16.05.2019
Сообщений: 1
Репутация: 10
По умолчанию Помогите создать блок с фиксированным бакгроундом при прокрутки текста

Привет. Давным давно чуть-чуть знал HTML. За 11 лет не написал ни одного тега. Все спецификации шагнули вперед. Когда-то делалось всё тегом <table> Теперь он не актуален. Все делают блоками <div>
Понадобилось кое что сбацать.
Суть такая:
В шапке логотип и т.д.
Потом ниже идёт блок с фоновым изображением.
После идёт допустим таблица с текстом и т.д.

Нужно сделать так: Допустим видимая высота блока 200пикс, а внутри него пространство с текстом или без текста, высотой в 800пикс. Чтобы при скролинге вниз всей страницы, сначала скролился блок до заданной высоты и только потом всё остальное...

Привожу пример того что натыкал, но что-то не совсем получилось...:

Код:
<table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<tr><td width="50%" align="left"><img src="logo.jpg" border="0"></td><td width="50%" align="right"></td></tr>
</table>
Пожалуйста, оформляйте Ваш код согласно правилам.

Код:
<div class="prokrut">Вот в этом блоке хочу всё сделать. Здесь много текста или пространство с высотой 800пикселей<p></div>

<table width="100%" border="1" cellpadding="0" cellspacing="0" align="center"><tr><td>далее пошло поехало</td></tr></table>
Стиль прописал такой:
Код:
.prokrut
  {
background-repeat: no-repeat;
background-attachment: scroll;
overflow: auto;
  width: 100%;
  height: 200px;
  border: 1px solid Red;
  background-image: url("bg3.jpg");
  }
Надеюсь вы поняли задумку!
Вот типа как здесь http://belprofigrupp.kz но чуть-чуть по другому. Как я описал

Последний раз редактировалось Вадим Мошев; 28.05.2019 в 17:58.
AndreStels вне форума   Ответить с цитированием
Старый 28.05.2019, 16:48   #2
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 70
Репутация: 141
По умолчанию

Если я вас правильно понял, это делается с помощью
background-attachment: fixed;
Вот пример
Код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		.bg{
			background: url('http://lorempixel.com/1920/1100/transport') center center no-repeat;
			background-attachment: fixed;
		}
    </style>
</head>
<body>
	<div class="bg">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, perferendis culpa adipisci deleniti tenetur earum excepturi ipsum, a error inventore optio aut placeat at atque vel quas labore. Laborum, a!</p>
		<p>Voluptates impedit maiores, pariatur cupiditate beatae nostrum numquam corporis ex harum molestiae ea recusandae placeat repellendus ad praesentium, dolor omnis, fugiat amet, ut natus esse vero. Commodi, reprehenderit corrupti enim!</p>
		<p>Consequuntur est soluta itaque magni distinctio commodi voluptas a architecto nulla, accusantium nihil hic recusandae, perferendis voluptates delectus autem! Quis vero ab omnis consequuntur eum eius dolorum iste soluta ipsum.</p>
		<p>Facere, natus. Voluptatibus illo placeat nihil ex sit obcaecati ipsa. Praesentium sequi explicabo, sint error dolores. Eius vel expedita laborum, quasi libero ab velit quas veritatis accusantium enim est possimus.</p>
		<p>Aut odio dicta expedita laboriosam. Vero consequuntur, labore dolores laborum sed. Vel facilis, eligendi, soluta distinctio, fugiat obcaecati nobis voluptatum, incidunt laboriosam sequi expedita. Fugit minus ea nulla, qui quae.</p>
		<p>Nobis explicabo eveniet sapiente deleniti cupiditate illum amet quo. Fuga nam accusantium vel unde deserunt nisi voluptate odit porro provident eveniet ipsum perspiciatis quos, ex impedit sint, quidem aspernatur ducimus.</p>
		<p>In maiores a facilis culpa maxime dicta, nobis, placeat adipisci cumque tempore laudantium iusto blanditiis perferendis. Eaque dolor ea quo porro esse vel dolore! Quam quisquam quis quidem, amet tenetur?</p>
		<p>Fugiat iusto reprehenderit nihil cupiditate, officiis dignissimos maxime et voluptate numquam optio placeat aut, animi vitae? Deserunt est eos similique, natus, doloribus necessitatibus hic a optio, perspiciatis repudiandae ullam dolorem.</p>
		<p>Voluptate dolores doloribus provident, vitae deleniti porro, excepturi modi, saepe ipsum nostrum nobis aliquam! Voluptates velit deserunt quasi numquam veritatis et doloremque nam esse, adipisci nobis vel excepturi, repudiandae sint.</p>
		<p>Delectus asperiores magnam ipsum consectetur! Voluptas tempora non in sit sed omnis ducimus obcaecati? Inventore, repudiandae incidunt similique! Eum commodi sit assumenda voluptas vel. Error vero recusandae maiores maxime dolorum.</p>
		<p>Natus facere assumenda minima quae dolorum reiciendis repellat nulla! Voluptate expedita aliquam possimus amet sunt soluta. Reiciendis dolores quisquam, maxime delectus libero architecto. Distinctio, sapiente quia pariatur, eligendi fuga eveniet.</p>
		<p>Laboriosam praesentium odio pariatur placeat facilis enim doloremque qui sapiente vitae nesciunt earum nobis architecto eveniet quas ipsa consequatur suscipit aperiam ipsum cum illum, nihil a sit nostrum impedit. Minus?</p>
		<p>Accusamus consectetur atque beatae dolore, perferendis provident dicta sapiente, porro minima assumenda rem dolorum consequuntur adipisci molestiae doloribus, voluptas, ea aperiam. Numquam inventore amet perspiciatis vitae atque quod tempora quae.</p>
		<p>Excepturi animi iusto commodi asperiores quos saepe magnam ipsa, laudantium ad, obcaecati debitis libero assumenda facere voluptates iure sint. Id nesciunt fugiat modi, quo accusamus dicta hic perspiciatis, doloribus quasi!</p>
		<p>Animi sit, veritatis magni. Quae deleniti nemo deserunt ea soluta distinctio, magni consequuntur culpa officia sed quo eaque, aperiam incidunt dolorum ipsa doloremque, enim ducimus numquam expedita vel. A, ex.</p>
		<p>Quasi dolore facilis, quisquam rerum quam nihil, tempora aperiam. Quae itaque, ex ratione. Ipsa impedit magnam consequuntur, nulla nisi vel, neque dolorem assumenda vitae dicta, cum praesentium earum fuga necessitatibus!</p>
		<p>Fuga architecto eligendi eius nam a itaque aliquid voluptatibus amet. Maiores ex, mollitia magni ea amet non eaque quidem quisquam corporis officia debitis repudiandae, modi temporibus, voluptatum molestias veritatis nulla!</p>
		<p>Quibusdam perspiciatis aliquam explicabo incidunt, eum dicta necessitatibus tempora, quod ratione natus eligendi neque a eveniet sapiente, officia repellat illo aut maiores blanditiis, odio suscipit placeat. Beatae quasi quia delectus.</p>
		<p>Inventore praesentium corporis ipsa iste nihil! Tempore aperiam cumque, quae pariatur minus illum debitis quis alias eligendi molestias, expedita dignissimos harum aliquam tempora earum ipsa? Nemo sapiente veritatis, reprehenderit nesciunt.</p>
		<p>Dolorum consequatur suscipit saepe. Recusandae aspernatur aliquam explicabo quia nihil maiores eos sequi aperiam rerum repudiandae minus autem quod vel molestias velit necessitatibus in ipsum cupiditate rem iusto, fugiat minima.</p>
		<p>Repellat qui ratione velit inventore dolorum maiores asperiores repudiandae alias, aperiam error vero facere praesentium fugiat impedit est voluptate atque, esse debitis sequi dignissimos! Aperiam culpa, dolorum neque laudantium quis.</p>
		<p>Repudiandae architecto accusantium ipsum possimus harum, sequi officiis consequatur quasi. Illo, perferendis quo, quas pariatur accusamus incidunt rem, dolore, sint necessitatibus doloribus doloremque. Incidunt illo delectus aliquam minus. Rerum, saepe.</p>
		<p>Optio recusandae porro repellat minima laudantium et labore. Voluptas, nisi suscipit. Aliquam itaque quia esse maxime autem, in voluptate earum ea, deleniti pariatur dolore, tenetur natus saepe! Nihil, assumenda, laborum!</p>
		<p>Eaque, nemo magni vel eligendi vero sunt. Omnis cupiditate deserunt ullam fugit reprehenderit beatae quis id, consequatur quam consequuntur nihil voluptatem accusantium alias similique ab, nostrum soluta fuga asperiores cumque.</p>
		<p>Tempore cumque voluptatem dignissimos laborum accusamus odio maxime omnis possimus minus expedita minima, harum, tenetur, quis maiores eveniet! Eveniet accusantium eos, quos minima sit nulla. Optio magnam, quod hic ipsa.</p>
	</div>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique odit cumque nulla aut vel iusto accusantium pariatur minima ut nam unde tempora debitis, id illo quis. Ex esse est, quam.</p>
		<p>Cumque quas mollitia distinctio perspiciatis est rem in obcaecati quae laborum vel consequatur iure sit id nemo aperiam, expedita dolorem culpa recusandae, totam vitae quod. Tempore aperiam dolor, voluptates quisquam.</p>
		<p>Eaque unde ut tempore nulla distinctio consequatur, eius corporis asperiores modi aliquam voluptatibus iste incidunt ducimus quos at excepturi dolorem. Tempore laboriosam repellendus quidem, atque fuga. Illo temporibus reiciendis id?</p>
		<p>Blanditiis, dignissimos! Sit aliquam, enim illo dolore quo ab ipsam adipisci explicabo magnam eligendi accusamus saepe rem nesciunt, cumque ea, et porro ipsa. Ullam autem aspernatur in, corporis magni tenetur.</p>
		<p>Vel, quas, ex! Quod quia saepe sint officia quaerat optio praesentium, maxime at unde magnam est odit, minus, atque soluta. Modi iure neque, veritatis optio nesciunt! Pariatur repudiandae quam culpa.</p>
	</div>
</body>
</html>
web-coder вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блок ссылок с полосой прокрутки nikolokaputik80 HTML и CSS 1 21.11.2015 14:23
имитация прокрутки текста Рыбчик Помощь студентам 7 22.11.2014 20:17
Помогите создать блок схему Грек-Илья Помощь студентам 2 19.06.2014 14:47
Помогите создать блок-схему. andryu100 Помощь студентам 2 11.05.2014 19:29
Помогите создать блок-схему Operator-cn Общие вопросы C/C++ 5 22.10.2009 21:16


22:00.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.