Картинка-фон на всю ширину

@Sylest · Регистрация: 21.03.2012

Студворк — интернет-сервис помощи студентам

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

Имеется проблема. Не выходит сделать background-image на всю ширину шапки, чтобы затем на нем (в рамках блока 960px) расположить другие элементы - логотип, контакты, ссылки-меню.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>MiroVision - разработка и продвижение веб-сайтов</title>
    <link href="images/styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div class="wrapper">
        <header>
        <div class="topper">
            <div class="header-inner">
                <a href="/" class="logo"><img src="images/logo.png"></a>
                <span class="logo-text">Mirovision</span>
            </div>
        </div>
        </header>
</div>
</body>
    
 
 
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
@font-face {font-family: Aniuk; src: url(fonts/Aniuk-Regular.ttf); }
 
 
 
body {margin: 0; padding: 0; background-color: #232323; font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
 
.wrapper {max-width: 960px; margin: auto;}
.topper {position: absolute; background-image: url(../images/top.png); height: 65px;}
.header-inner {position: relative; width: 1070px; margin: 0; }
.logo img {display: block; margin-top: 2px; position: absolute;}
 
span.logo-text {font-family: Aniuk; font-size: 36px; color: white;}

Собственно сам фон: http://rghost.ru/59870396

@Vladislav WebDev · 22.12.2014, 00:02

Сообщение от Sylest

Не выходит сделать background-image на всю ширину шапки

background-position: cover;

@Fedor92 · 22.12.2014, 11:54

Сообщение от Vladislav WebDev

background-position: cover;

У background-position нет значения cover...

Sylest, background-size:100%...

@Vladislav WebDev · 22.12.2014, 11:57

Fedor92, ой да, тупанул, ночью мозги не те)) background-size: cover

@Fedor92 · 22.12.2014, 12:07

Сообщение от Vladislav WebDev

Fedor92, ой да, тупанул, ночью мозги не те))

Бывает...

Иногда тоже косячу...

Недавно пробовал background-size: cover - он в ие11 отвалился... Фон был шириной 1000px - а на разрешении 1920рх - он занял не всю ширину моника - не знаю откуда такой косяк - хотя в остальных браузерах всё норм при данном свойстве... Поправил на background-size:100% - всё стало норм...

@Vladislav WebDev · 22.12.2014, 12:23

Сообщение от Fedor92

Недавно пробовал background-size: cover - он в ие11 отвалился

Как так?)) Я сам тестил помню его, в ие11 это свойство точно работало

@Fedor92 · 22.12.2014, 12:25

Сообщение от Vladislav WebDev

Как так?)) Я сам тестил помню его, в ие11 это свойство точно работало

Сам в шоке...

@Vladislav WebDev · 22.12.2014, 12:30

Сообщение от Fedor92

Сам в шоке...

Ради интереса щас протестил еще раз и на всякий случай - работает

@Fedor92 · 22.12.2014, 12:43

Сообщение от Vladislav WebDev

Ради интереса щас протестил еще раз и на всякий случай - работает

Я и сам знаю, что работает...

Но пару дней назад честно слово прописывал данное свойство фон занял полэкрана до сих пор понять не могу почему...

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	22.12.2014, 11:57
	Fedor92, ой да, тупанул, ночью мозги не те)) background-size: cover 0