Максим

Выносишь бэкграунд из css в html -> тег style:

<div class="bg" style="background-image: url(<?php bloginfo( 'template_url' ); ?>/assets/img/bg.png);">

Получаешь путь до темы:
<?php bloginfo( 'template_url' ); ?>
Далее просто прописываешь, где лежит картинка.

Я так понимаю инженеру дают чертеж на бумаге, а он по нему строит дом, но для чего это нужно? Зачем вообще чертежи, почему не строить сразу же? Почему архитектор не может построить дом? Инженеру даются поэтажные планы, а он должен их из кирпича строить? Если инженеру не дадут чертеж, а скажут просто построить дом, может ли ему пригодится для поэтажных планов archCAD или его замена?

как перевести это значение в em

Поделить line-height в px на размер шрифта в px

Чем отличается line-height = 1em от line-height = 1

Пример, когда есть разница

Если вы о линиях, то я для одного ответа тут уже делал :))


Можно, конечно, просто картинкой на задний фон поставить эти круги.

А ежели вы о вёрстке всего блока — то это уже задание, а не вопрос.

В связи с тем, что автор нашел скругления в своем макете, вариант с SVG:


Например, так
Для скруглений на CSS еще пошаманить с https://jsfiddle.net/xt1chyvn/
Либо псевдоэлементом с градиентом или бордером, если фон цветом (который голубой у вас), а не картинкой.

Один общий блок с картинкой,
внутри несколько блоков с белыми рамками без фона.
Внутренние блоки флексами.

no-repeat?

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Потому-что у изображения не хватает ширины и оно заново заполняет блок.

Пофиксить

background-repeat: no-repeat;
background-size: cover;

js offset.top windows.scrollTop проверяешь например 80px от верха вьюпорта и делаешь position fixed

Нет

навскидку по-быстрому
как-то так?
https://jsfiddle.net/gw70yp9b/1/

sec6 section img{
    background: url(/images/157195/kvadratikshema1.png#size_98x98) center no-repeat;
    padding: 98px;
  }

тут ты задаешь бакграунд всем картинкам, а хочешь бакграунд с квадратиком только картинкам, которые внутри дива (.sec6 section div img)

<input type="text" name="city" value="" id="input-city"  />
<ul>
  <li data-value="Город 1" class="js-item">
    <a href="#">Город 1</a>
  </li>
  <li data-value="Город 2" class="js-item">
    <a href="#">Город 2</a>
  </li>
  <li data-value="Город 3" class="js-item">
    <a href="#">Город 3</a>
  </li>
</ul>

const inp_city = document.querySelector('#input-city');
const li_item = document.querySelectorAll('.js-item');

for (let i = 0;i < li_item.length;i = i + 1) {
	li_item[i].addEventListener('click',function () {
  	inp_city.value = this.dataset.value;
  }, false)
}

https://jsfiddle.net/ruetz08q/14/

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).attr('data-value')
  $('input').val(text)
})

$('li').click(function(e) {
  e.preventDefault();
  let text = $(this).find('a').text();
  $('input').val(text)
})

.box1 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 50%;
	height: 50%;
	top:0;left:0;bottom:0;right:0;
	margin:auto;
	border:1px solid #333333;

}

.box2 {
	width: 120%;
	height: 120%;
	flex-shrink: 0;
	background: blue;
	opacity:0.5;
}