Вадос Пёс

Нашел решение, почитав повнимательнее о z-index.

классу mapandphone добавил 

	position:relative;
	z-index:999;

а классу logo добавил 

	z-index:998;

Как оказалось z-index не подходит для элементов static, который указывается у блоков по умолчанию.

7 минут назад, Джулия сказал:

перенесла ваш код,вставила картинку-логотип))

можно навести и выделить номер и адрес

http://codepen.io/JuliJulia/pen/XKgBOO

у вас картинка оказалась сзади меню (это кстати надо будет пофиксить))). Я хочу что бы лого было поверх темного фона, а класс mapandphone поверх лого.

Доброго времени суток.

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

Пробовал баловаться с z-index-ом, но ничего дельного не получилось.

html

    <div class="container header">
    	<img src="img/logo.png" class="logo" alt="Логотип гастробара Discovery">
	</div>
    <div class="container main">
    	<div class="navigation">
        	<div class="mapandphone"><table><tr>
                <td>Большая пушкарская д.30<img src="img/mapico.png" alt=""></td>
                <td><img src="img/phoneico.png" alt="">904<span>22</span>89</td>
            </tr></table></div>
            <table class="content"><tr><td><ul>
              	<a href="#"><li>что мы<br>предлагаем</li></a>
                <a href="#"><li>что у нас<br>происходит</li></a></ul></td><td><ul>
                <a href="#"><li>что о нас<br>говорят</li></a>
                <a href="#"><li>как до нас<br>добраться</li></a>
            </ul></td></tr></table>
        </div>
        <!-- остатки хеда -->
    </div>

css

.header {
	background-image: url(img/mountain.jpg);
	padding-bottom:14%;
}
.content {
	padding: 5vw 10%;
}
.container {
	background-size:100%;
}
.logo {
	position:absolute;
	width:40%;
	left:30%;
}
.main {
	background-image:url(img/boards.png);
	color:#FFFFFF;
	position:relative;
}
.navigation {
	background-color:rgba(0, 0, 0, 0.6);
}
.mapandphone {
	font-size:2.5vw;
}
.mapandphone a{
	font-weight:normal;
	text-decoration:none;
}
.mapandphone img {
	width:8%;
	vertical-align: middle;
}
.mapandphone span {
	padding-left:2%;
	padding-right:2%;
}
.navigation table {
	padding-top:0;
	padding-bottom:0;
	width:100%;
	border:none;
}
.navigation td {
	margin:0;
	width:50%;
}
.navigation td:nth-of-type(1) {
	text-align:right;
	padding-right:7%;
}

.navigation td:nth-of-type(2) {
	text-align:left;
	padding-left:7%;
}
.navigation ul {
	list-style: none;
	margin:0;
	padding:0;
	text-align:justify;
	line-height: 0;
}
.navigation ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.main li {
	display: inline-block;
	text-align:center;
	padding:1vw 5%;
	line-height: normal;
}
.main li:hover {
	background-color:rgba(255, 255, 255, 0.1);
}
.main li:active {
	top: .2em;
	left: .2em;
}
.main a {
	font-size:2vw;
	color:#FFFFFF;
}

18 часов назад, by chris сказал:

Две картинки никак не могут быть легче , чем одна.

Спасибо, ничего не остается кроме как согласиться)

В 27.06.2016 в 20:38, by chris сказал:

Зачем аналоги плохо качества вне видимости экрана? Пусть картинки подгружаются при прокрутке. Для главной картинки вроде как прелоадер хорошая практика. Подгружать два разных изображения, плохую и хорошую - лишнее.

По гугл аналитикс большинство моих посетителей - мобильные приложения, хочу максимально облегчить сайт.

Здравствуйте, 

Заранее извиняюсь, если тема обсуждалась, или слишком глупа. 

Я создаю сайт лендинг пейдж, где много фоновых картинок-фотографий. Боюсь что сайт будет много весить и грузиться долго. В интернете нашел скрипт, в котором картинки заменяются на аналоги плохого качества если находятся вне видимости экрана. Но у скрипта два минуса: 1) он не предназначен для фоновых изображений, тк те подгружаются из css, 2) не работает для изображений на первой странице, тк скрипт начинает работать только при скролинге. 

С первой проблемой думаю можно справиться если картинки делать не фоном, а при помощи img position.

И собственно мой вопрос по второй проблеме: как сделать что бы сначала загрузилась "плохая" картинка, а потом после загрузки нормальной, она заменяла "плохую"?

Ну и второй вопрос: Ваше мнение насколько этот способ правильный? Может Вы можете посоветовать варианты получше?