Как сделать одинаковы фон двум блокам?

Question

[ishimskayamahorka14]

Как сделать одинаковы фон двум блокам, идущими друг за другом?
Предпринята попытка задать обоим

#sp-header, #sp-menu {
	background-image: url(http://ollmet.wg3036.wg01.ru/images/bgs/slide-corte-laser.jpg);
	background-size: 100%;
	background-position: top center;
	background-attachment: fixed;
}

, но необходимо, чтобы фон не скроллился, а без этого функция вроде бы как не работает.
Спасибо заранее за ответы!

HTML

<header id="sp-header"><div class="container"><div class="row"><div id="sp-logo" class="col-xs-12 col-sm-4 col-md-4"><div class="sp-column "><h1 class="logo"> <a href="/">Оллмет</a></h1></div></div><div id="sp-top1" class="col-xs-12 col-sm-4 col-md-4"><div class="sp-column "></div></div><div id="sp-top2" class="col-xs-12 col-sm-4 col-md-4"><div class="sp-column "></div></div></div></div></header>
<section id="sp-menu"><div class="container"><div class="row" style="position: relative;"><div id="sp-menu" class="col-sm-12 col-md-12" style="position: static;"><div class="sp-column ">			<div class="sp-megamenu-wrapper">
				<a id="offcanvas-toggler" class="visible-sm visible-xs" aria-label="Menu" href="#"><i class="fa fa-bars" aria-hidden="true" title="Menu"></i></a>
				<ul class="sp-megamenu-parent menu-slide-down hidden-sm hidden-xs"><li class="sp-menu-item current-item active"><a href="/index.php">Главная</a></li><li class="sp-menu-item"><a href="/index.php/uslugi">Услуги</a></li><li class="sp-menu-item"><a href="/index.php/o-kompanii">О компании</a></li><li class="sp-menu-item"><a href="/index.php/prajs-list">Прайс-лист</a></li><li class="sp-menu-item"><a href="/index.php/oplata-i-dostavka">Оплата и доставка</a></li><li class="sp-menu-item"><a href="/index.php/kontakty">Контакты</a></li></ul>			</div>
		</div></div></div></div></section>

CSS

#sp-header, #sp-menu {
    background-image: url(http://ollmet.wg3036.wg01.ru/images/bgs/bghdr2.jpg);
    background-size: 100%;
    background-position: top center;
    background-attachment: fixed;
}
#sp-header {
    background: #ffffff none repeat scroll 0 0;
    height: 241px;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    padding-top: 44px;
    z-index: 99;
}

Comments

[andrash_]

Скинь html код, ты сейчас задал фиксированное позиционирование у этих блоков. они находятся друг под другом. И конкретизируй задачу.

[ishimskayamahorka14]

andrash, готово, если поможет - вот ссылка на сайт: ollmet.wg3036.wg01.ru

[andrash_]

damarkuzz, Не обязательно меню в отдельной секции размещать.

<header>
<h1>logo</h1>
<div class="menu"></div>
</header>

Потом задаешь у header один bgi и все.

[ishimskayamahorka14]

andrash, я просто делаю через CMS Joomla на шаблоне Helix 3 и у меня нет возможности объединить их под общий родитель :(

[Пащук Илья]

andrash, согласен меню является частью хедера, тогда логично:

<header class="header">
  <section class="header__top"></section>
  <nav class="header__menu"></nav>
</header>

Answer 1

[html-css]

background-image: url(http://ollmet.wg3036.wg01.ru/images/bgs/slide-corte-laser.jpg)  top center no-repeat;

Comments

[ishimskayamahorka14]

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

Answer 2

[Пащук Илья]

Первое что бросается в глаза, у вас вот здесь дублируются ID так лучше не делать, и правило хорошего все стилизации вешать на классы


Конкретно в вашем случае поможет отрицательное позиционирование то есть смотрите:
тут смотрите

Answer 3

[tcherep]

Положите их в родительский блок и задайте ему фон.

Comments

[ishimskayamahorka14]

Я не могу, я делаю в Joomla на Helix 3 :(
Вот сам сайт: ollmet.wg3036.wg01.ru