Фон сайта html + C++

Если коротко, то сделал фон сайта, загрузил, сделал по расширению экрана и так, чтобы он оставался на месте при скролинге. На компе просто чики пуки, а на телефоне это ужас, маленькая картинка фона которая дублируется по размеру телефона (вертикалка). Как это можно пофиксить чтобы было все норм на ПК и на ТФ?

А С++ причем? :thinking:

Это как?

И где код и фон?)

<style>
			 body {
    background-image: url(Fon.png);
    background-attachment: fixed; 
 -moz-background-size: 100%; 
    -webkit-background-size: 100%; 
    -o-background-size: 100%;
    background-size: 100%; 
   }

		</style>

http://free107907.ispsite.ru/ - сайт

Скорее всего нужно иначе масштабировать фон…
Например так:

background: url(images/fon.png) 100% 100% no-repeat;
background-size: cover;

Получаются в некоторых местах белые места (в нижних) на ПК. На тф кнш картинка 1, но она не закрывает оставшуюся часть пространства.

А если так:

margin: 0;
height: 100%;
background: url(images/fon.png);
background-size: cover;
width: 100%;
color:gold;
height: 2000px;
/* Фон */
background-image: url("Fon.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background:gray();

Вот так норм, не буду врать, скомуниздил с веб-ресурса.

<style> 
  html { height: 100%; }
  body {
   margin: 0;
   height: 100%;
   background: url(fon.png);
   background-size: cover;
   } 
</style>

Так тоже будет норм масштабировать

1 лайк

Странные скобки :thinking:

Сломается если высота экрана будет больше? (4К, …)


ЗЫ при вставке кода на форумах надо нажимать кнопку Код )

1 лайк

Неа, было на 1млн, там просто полоска скролинга больше была.

Ребят подскажите, фон с горем пополам растянул, но элементы сайта остались не по размеру, как это можно дело пофиксить?

В смысле не по размеру, что ожидается увидеть?

P. S.

height: 2000px;

лучше указывать в процентах

Меню, кнопки, бегущая строка, аудио так чтобы было более менее крупным и в масштабах телефона выглядело удобнее, но при этом и на ПК сохранилось тот же порядок и внешний вид. Можно ли так сделать?

Масштаб приводить не в пикселях а в процентах относительно страницы (контейнера).

В процентах все обратно возвращается, не приятная белая полоса на тф.

Надо было брать Bootstrap и не париться :kolobokbatya:

Media queries

Так 1 млн это наоборот больше экрана.

Вообще есть же height: 100% для этого, у html и body

1 лайк

когда в процентах.

Так а добиваетесь чего?
На первом скрине фоновая картинка закрываетися серым фоном и её не видно.

Вряд ли картинка растянется так чтобы закрыть полностью пустой промежуток, а если не закрыть, то будет выглядеть как то убито. Так что это по крайней мере лучший вариант. Ладно ребят, спасибо за помощь:)

Так а на телефонах и нет места для этих картинок по бокам.

Посмотрите любые современные сайты.

Там обычно остается только одна колонка (основной контент), остальные или вливаются в нее как-нибудь так

колонка 1 (меню, ...)
---
колонка 2 (контент)
---
колонка 3 (популярные/последние материалы, ...)

и/или например в случае меню заменяются выпадающим списком (“гамбургер”).

https://guides.hexlet.io/bootstrap/#брейкпойнты

Такие сайты с картинками по бокам уже и найти сложно. Потому что mobile first везде, на большинстве популярных сайтах большая часть пользователей заходит с телефонов, так что смысл рисовать эти картинки только для десктопа (и париться с двумя непохожими версиями интерфейса). Нашел только в wikia и на кривоватом древнем сайте местного магазина, оба тупо убирают картинки/рекламу по бокам.

Если есть подобный фон, то он обычно как-нибудь на всю страницу на любом экране.