Как растянуть фоновое изображение размещённое в одном контейнере на 2 контейнера.


#1

Добрый день. Ситуация такая что я переделываю макет где в header - у меня был размещён весь первый контейнер и лого и кнопки и заголовки и формы для ввода, мне нужно это разделить и сделать в header только лого и кнопки, а в первом div - разместить заголовки и формы для ввода, я сделал это. В div я разместил ссылку на фоновое изображение - всё получилось, однако фоновое изображение покрывает только участок контейнера div т.е. там где у меня лого и кнопки белый пробел, мне нужно чтобы изображение растянулось вверх и этот пробел собой покрыло. Мне подсказали что это делается с помощью абсолютного позиционирования, я его прописывал в header и моё лого с кнопками летало по всему экрану, при этом влияния на фоновое изображение не происходило… как это сделать? Подскажите направьте пожалуйста.

Вот как это выглядить - https://www.dropbox.com/s/1u8jzhgo52rixuf/Скриншот%202018-10-08%2015.11.37.png?dl=0 мне нужно только чтобы фон растянулся вверх, всё остальное на экране на своим местах и корректно.


#2

Ссылку на сайт или ссылку на код страницы в песочнице прикрепите, пожалуйста.


#3

Мне необходимо как то тут разместить код? Сори я ещё не разобрался. Удалось найти решение возникшей ситуации, однако это решение получилось другого типа (я добавил ещё один контейнер div в котором и разместил хэдер и первый блок интро (где заголовки) - и соответственно привязал фоновое изображение к этому общему div) - однако мне изначально говорил использовать абсолютное позиционирование - с его помощью я не смог решить задачу если фоновое изображение привязано к контейнеру “интро” где заголовки.


#4

Предполагаю, что вместо контейнера мог быть псевдоэлемент с абсолютным позиционированием.


#5

т.е. каким образом это можно сделать? Вот кусок где уже как я писал выше фон. рис. привязан к “общему” div - и соответственно сайт выглядит как положено, но как это можно было сделать другим образом? т.е. если мы убираем общий div где привязан фон, и помещаем фон в “div class=“intro”” - а именно в класс. Тогда на сайте получается полоса фона которая растянута только на вот это поле с заголовками, а над ним пустой белый пробел на весь хедер.

<body>
    <div class="back">
     <header class="container">
                <div class="heading clearfix">
                <img src="img/Logo-Treehouse.png" alt="Логотип" class="logo">
                <nav>
                    <ul class="menu">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Servises</a>
                    </li>
                    <li>
                        <a href="#">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    </ul>
                 </nav>
                </div>
         </header>
<div class="intro">    
    <div class="container">
        <div class="titles">
            <div class="titles_first">
                Welcome To Our Studio
            </div>
            <h1>
                It’s nice to Meet you
            </h1>
        </div>
        <a class="button" href="#">Tell Me More</a>
    </div>
</div> 
</div>

#6

Опубликуйте весь код, пожалуйста. Через песочницу, например, или через github pages.


#7

можете уточнить как именно через github pages это сделать? У меня все файлы загружены в гитхаб, однако я не знаю как именно мне их здесь разместить.


#8

Там же инструкция есть. Какой из шагов вы не можете сделать?


#9

Там речь идёт о создании репозитория, далее о подключении домена, дело в том, что у меня уже создан репозиторий и загружены файлы, а домен мне не нужно подключать, и мне не ясно как правильно сделать так, что-бы показать вам код который размещён в моём репозитории.


#10

У вас должна получиться такая ссылка в итоге: http://jurassic-period.github.io/golden (сейчас она не работает).
В своем репозитории вам нужно создать еще одну ветку - с названием gh-pages.
Но предполагаю, что кроме этого нужно, чтобы index.html лежал не в дополнительной папке, а рядом с readme.


#11

Так файл html перепушил во вне папки, теперь подскажите “ещё одну ветку” это же не создать новый репозиторий т.е. мне нужно что то в самой папке создать? Как это правильно сделать?

brench и там прописать название этой ветки?

Создал что то по пути что вы указали выше стало открывать но не похоже на то что реально есть) css не задействован

начинает доходить у меня же путь изменился теперь…


#12

Не совсем так… Я имела в виду, что вам нужно убрать эту папку-обертку Golden_First.
Иначе неправильно выходит: html-файл перешел на уровень выше, а css то на месте остался и путь <link rel=“stylesheet” href=“css/main.css”> ломается.
Ветку можно создать прямо со страницы репозитория. Похожая тема: Github Ссылка на личный проект


#13

Сделал но ничего не поменялось почему то… папку убрал, пути восстановились


#14

Это ветка, из которой собирается ваша страница: https://github.com/jurassic-period/golden/tree/gh-pages. И здесь всё не так как в master. Удалите gh-pages и создайте заново.


#15

Как все сложно сделано ужс, получилось теперь вы по этой ссылке можете код посмотреть или ещё что то необходимо добавить?


#16

У вас открывается?
Этот ужс вам еще не раз понадобится, так что всё не зря.


#17

А у вас не открывается? Проверил других браузерах везде открылось - https://jurassic-period.github.io/golden/


#18

Что-то не открывается.

Видимо проблема с моей стороны только. Еще попробую.

UPD: это кажется смешным, но с другого устройства результат тот же.

Если кто-то еще читает эту тему, проверьте у себя, открывается ли ссылка, пожалуйста.


#19

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


#20

Теперь открывается. Посмотрю в течение дня.