Отзывчивые фоновые изображения css
У меня есть веб-сайт (g-floors.eu), и я хочу сделать фон (в css я определил BG-изображение для контента) также отзывчивым. К сожалению, я действительно понятия не имею, как это сделать, за исключением одной вещи, которую я могу придумать, но это довольно обходной путь. Создание нескольких изображений, а затем использование размера экрана css для изменения изображений, но я хочу знать, есть ли более практичный способ достичь этого.
в основном я хочу достичь того, что изображение (с водяным знаком "G") автоматически изменяет размер без отображения меньшего количества изображения. Если это возможно, конечно
ссылка: g-этажи.ЕС
код, который у меня есть до сих пор (content part)
#content
{
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
17 ответов
Если вы хотите масштабировать одно и то же изображение в зависимости от размера окна браузера:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Не устанавливайте ширину, высоту или поля.
по этому коду ваше фоновое изображение идет в центр и фиксирует его размер независимо от изменения размера div, хорошо для небольших, больших, нормальных размеров, лучше всего для всех , я использую его для своих проектов, где мой размер фона или размер div может измениться
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
попробуйте это :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
вот Sass mixin для отзывчивого фонового изображения, которое я использую. Он работает для любого block
элемент. Конечно, то же самое может работать в обычном CSS, вам просто нужно будет вычислить padding
вручную.
@mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
@include responsive-bg-image(204, 81);
}
пример http://jsfiddle.net/XbEdW/1/
вот лучший способ, который я получил.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
проверить w3schools
дополнительные доступные опции
background-size: auto|length|cover|contain|initial|inherit;
Это легко =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
посмотри демо jsFiddle
Я
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
, который работал очень хорошо.
отзывчивый веб-сайт, добавив заполнение в нижнюю высоту изображения / ширину x 100 = заполнение-Нижний %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
более сложный метод:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
попробуйте изменить размер фона EQ Firefox Ctrl + M, чтобы увидеть magic nice script i подумайте лучше:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
Если вы хотите, чтобы все изображение отображалось независимо от соотношения сторон, попробуйте следующее:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
Это покажет все изображение независимо от размера экрана.
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
вы можете использовать это. Я проверил и его работу на 100% правильно:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
вы можете проверить свой сайт с отзывчивостью на этом симуляторе размера экрана: http://www.infobyip.com/testwebsiteresolution.php
очистить кэш каждый раз, когда вы вносите изменения, и я бы предпочел использовать Firefox, чтобы проверить его.
Если вы хотите использовать форму изображения другого сайта / URL и не нравится:
background-image:url('../images/bg.png');
// Эта структура должна использовать изображение с вашего собственного хостинга сервер.
Тогда используйте вот так:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
наслаждайтесь :)
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
@media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
всего две строки кода, он работает.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}
адаптивный для квадратного отношения с jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}
background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
или
background-size:100%;
Я думаю, лучший способ сделать это:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
таким образом, нет необходимости делать ничего больше, и это довольно просто.
по крайней мере, это работает для меня.
надеюсь, это поможет.