HTML - CSS, backround

[Akyze_]

Мне дали задание для самостоятельной вёрстки. Кинули PSD файл, где там изображено макет сайта. В одном слое есть слой для фона. В фоне имеется картинка и на картинке по типу блоков для текста (Они размытые, не отдельные). Как мне идеально вставить эту картинку как для фона сайта? Вставляю, а оно не по размеру всегда. Не могу понять, как правильно расставить размеры, чтобы оно идеально было по ширине сайта, когда открываешь, чтобы всё было видно, а не чтобы большой кусок половины был за сайтом.

 

[ChatGPT]

Верстка фона сайта с изображением, которое должно идеально соответствовать ширине любого устройства и просматриваемой области браузера, требует использования CSS со свойствами, которые позволяют адаптировать размер фонового изображения. Используйте следующие подходы:

1. CSS свойство background-size:

css
   .background-container {
       background-image: url('путь_к_вашему_фону.jpg');
       background-position: center center; /* Выравнивание по центру */
       background-repeat: no-repeat; /* Без повторения изображения */
       background-attachment: fixed; /* Фиксированное позиционирование */
       background-size: cover; /* Покрытие всей доступной области */
   }

Свойство background-size: cover; обеспечит покрытие фоном всей видимой области, но части изображения могут быть обрезаны.

2. Полный размер без обрезки:
Если требуется, чтобы весь фон был полностью виден без обрезки, использовать можно значение contain для background-size:

css
   .background-container {
       ...
       background-size: contain; /* Полное содержание изображения */
   }

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

3. Использование vh и vw единиц:
Вы можете также использовать единицы относительно размеров вьюпорта, чтобы установить размеры фона:

css
   .background-container {
       width: 100vw; /* 100% ширины вьюпорта */
       height: 100vh; /* 100% высоты вьюпорта */
       background-image: url('путь_к_вашему_фону.jpg');
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;
   }

4. Медиа запросы для адаптивности:
Изменяйте параметры фона с помощью CSS медиа запросов, чтобы обеспечить адаптивность под разные размеры экранов.

css
   @media screen and (max-width: 768px) {
       .background-container {
           background-size: auto;
           /* Или подстройте фон под меньший экран другими параметрами */
       }
   }

Для корректной работы с PSD файлом:

• Откройте файл в программе, такой как Adobe Photoshop.
• Извлеките изображение фона на отдельный слой, если это ещё не сделано.
• Проверьте размеры изображения фона и при необходимости проведите ресайзинг, чтобы оно хорошо выглядело на разнообразных устройствах, при этом учитывайте размер слоя, который соответствует контейнеру фона в вашей верстке.

Учитывайте, что если картинка для фона содержит текстовые блоки или какие-то элементы, которые должны быть интерактивными или изменяться, имеет смысл вынести эти элементы из фонового изображения и верстать их отдельно с помощью HTML/CSS, чтобы они были доступны для редактирования и не были частью статичного растрового изображения.

 

[dxxxx]

Сделай саму картинку в размер экрана через конвертер. Может поможет

 

[myfapfap]

Тут надо смотреть чтобы картинка была нужного разрешения. Ты упоминал что некоторые части размытые - это скорее всего признак низкого разрешения. Но прежде чем думать про техническую часть вставки картинки в виде фона - уверен что тебе это надо делать? Может тебе дали картинки в виде макета и тебе просто надо сверстать сайт по образу и подобию?

 

[mabname]

Вообще нужно почитать про сам тег img, а также про то как с помощью css свойств можно менять картинкам и размер и положение и кучу других свойств, любая статья про отзывчивые изображение или видео на youtube

 

[Wotme2018]

Mabname написал все верно. У тебя есть картинка, при помощи атрибутов css ты можешь ее увеличить, уменьшить, повернуть на 180, поставить по центру экрана и тд и тп. Изучай в гугле, бана вроде у тебя нет.