Прикрепите фоновое изображение в одном и том же месте по отношению к содержимому на разных устройствах.

У меня есть веб-сайт, где я хочу, чтобы фон заголовка находился в одном и том же месте независимо от размера экрана/устройства. Я хочу, чтобы центр линий «прилипал» к точке в h1.

Я был близок, но есть ошибка, которая, я думаю, вызвана высотой div, когда я изменяю размер моего браузера до того же размера, что и iPhone 5, фон находится в немного другом месте, поэтому используйте background-position, чтобы сохранить центр под точкой не возможно. Я хочу избежать этой части, где линии пересекаются, оставляя точку.

Меня не волнует, обрезается ли фон границей браузера. Я просто хочу, чтобы центр линий всегда оставался под точкой! Как мне этого добиться? Я не могу выложить исходный код того, что есть на сервере (использую стилус), но вот то, что у меня есть, выдаёт такие же баги:

#header
	height: 344px
	max-width: 435px
	margin: 0 auto
	background: no-repeat url('/img/lines.png')
	background-position: -52px -2px
	background-size: 100%
	+below(435px)
		background-size: 320px
		background-position auto
	//haj.zso text
	h1
		text-align: center
		padding-top: 137px
		font-size: 65px
		font-weight: 700
		font-style: italic	
		letter-spacing: -3.7px
		margin: 0
<div id="wrapper">
      <div id="header" class="animated zoomIn">
        <h1 class="animated fadeInDownBig">haj.zso</h1>
       
      </div>

Я только играл со свойствами height, max-width, background-position, background-attachment и background-size, но без везения... Я чувствую, что вообще неправильно подхожу к этому.

Я не загружал его как изображение, потому что я не хочу анимировать строки позже и добавлять bg-клип при наведении к тексту.


html css responsive stylus
person ajz    schedule 14.05.2016    source источник
comment
вы хотите избежать чего? пожалуйста, уточните   -  person winresh24    schedule 14.05.2016
comment
Вам нужно опубликовать какой-то код, по крайней мере, то, что вы пытались решить. Однако предложение состоит в том, чтобы попытаться взять ширину и разделить на 2, чтобы получить половину балла.   -  person ib11    schedule 14.05.2016
comment
Я отредактировал и добавил код, который у меня есть сейчас   -  person ajz    schedule 14.05.2016
comment
Возможный дубликат Фиксированный фон div   -  person Creative Enemy    schedule 14.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте заменить свой css на этот

    #header {
    height: 344px;
    max-width: 485px;
    margin: 0 auto;
    background: url("/img/lines.png") no-repeat;
    background-position: center;
    background-size: cover;
    background-position-x: -57px;
}

@media only screen and (max-width: 400px){
#header {
    max-width: 320px;
    background-size: cover;
    background-position-x: -111px;
}
}
person winresh24    schedule 14.05.2016
comment
Он работает в настольных браузерах, когда я изменяю размер браузера, но на мобильных устройствах снова выдает следующее: imgur.com/A2iA5fg Не только в Firefox, во всех мобильных браузерах... Это так странно... Я заставил его работать на Android (текущая версия сервера), затем я показал его другу на iPhone, и та же ошибка, что и сейчас на Android... - person ajz; 14.05.2016
comment
что вы хотите, чтобы произошло? Я думал, вы хотите, чтобы (точка) haj.zso располагалась в центре фонового изображения. - person winresh24; 14.05.2016
comment
Я хочу, чтобы центр линий, где они пересекаются, находился под точкой. Извините, если я не был ясен - person ajz; 14.05.2016
comment
можешь дать мне его изображение? о том, что вы хотите, чтобы произошло в мобильном телефоне - person winresh24; 14.05.2016
comment
imgur.com/kwBrB5f нравится это. Я хочу, чтобы это выглядело так, как будто линии выходят из точки. (на этой картинке размер фона меньше, это не имеет значения) - person ajz; 14.05.2016
comment
Это все еще не работает .. :( все равно спасибо за помощь! - person ajz; 14.05.2016
comment
Вы можете отправить мне скриншот на мобильном телефоне после обновления кода. - person winresh24; 16.05.2016