То, что я до сих пор:Как сделать изменение размера фонового изображения в css?
body {
background-image: url("image file");
background-size: cover;
background-repeat: no-repeat;
}
Я нашел ответ смотрите ниже.
С background-size:cover фон будет автоматически масштабироваться с размером его родительского элемента, чтобы покрыть всю вещь.
В этом случае для масштабирования большего или меньшего размера вы можете установить ширину и высоту элемента тела.
если я изменю размер окна, он переместит текст в верхний правый угол изображения. –
Что вы имеете в виду? Там нет части сообщения, в котором упоминается текст. –
Чтобы переместить текст в тело, вы можете добавить свойство для 'text-align', где вы можете установить его как' center', 'left' или' right', в зависимости от того, где вы хотите это –
Используйте это:
background-size: 100% 100%;
Это то, что я хочу, но все это неправильно, если окно слишком велико, тогда изображение не будет растягиваться. и часть экрана будет белой. –
Я обновил ответ, я думаю, что это именно то, что вы хотите. –
вытягивается по горизонтали и по вертикали:
background-size: 100% 100%;
вытягивается по горизонтали (сохранить соотношение изображения):
background-size: 100%;
background-size: 100% auto; /* This is the same as above (included so you can see the similarities below). */
Натяжные вертикально (сохранить соотношение изображения):
background-size: auto 500px; /* If you use percentage (100%), you must set the height of the containing element. */
Вот интерактивный веб-страницу, где вы можете экспериментировать со свойством фон-размер:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
Что делать, если вы хотите только растянуть его по вертикали? –
@alexroberts Вы можете растягивать вертикально, манипулируя вторым значением свойства 'background-size'. Например, используйте 'background-size: 100% 800px;', если вы хотите сохранить ширину на 100%, но растяните изображение по вертикали до 800 пикселей. –
@alexroberts Взгляните на ссылку, которую я только что добавил в свой пост. Это предоставит вам краткий практический опыт использования свойства 'background-size', и я верю, что он решает многие вопросы, которые могут возникнуть у вас. –
я, наконец, нашел ответ все, что я должен был сделать изменить один из ваших ответов
body {background-image: url("image file");
background-size: 110% 130%;
background-repeat:no-repeat;
Благодарю вас за вашу помощь.
Что вы имеете в виду, изменяя размер фона? фон изменит размер при изменении размера браузера, или вы можете изменить размер фона с помощью мыши? – tanjir
Я хочу, чтобы изображение всегда отображалось на экране во время изменения размера браузера. полное изображение не только его часть при изменении окна –
@alexroberts Вы хотите, чтобы изображение растягивалось, чтобы покрыть видимую область? Или вы хотите, чтобы изображение сохраняло свои размеры? Если у вас есть плитка, с которой вы хотите закрыть экран, удалите из своего кода «background-image: no-repeat». В противном случае см. Мой ответ ниже. –