Масштабирование фонового изображения

У меня есть простая проблема, с которой я не могу работать. У меня есть следующий HTML-кодМасштабирование фонового изображения

<body background='/freewifilogo.png'> 
     <div align="center"> 
      <img src='/welcome.png' /> 
     </div> 
</body>

Я хочу фоновое изображение, чтобы иметь высоту и ширину до 50%, пока изображение размером рич 300 * 300 пикселей. Затем я хочу, чтобы он прекратил масштабирование.

Я просил Google, и я не нашел ответа на свою проблему.

источник

2015-02-18 SpeedyNinja

Можете ли вы дать нам скрипку? – cch

Возможно, вы можете использовать медиа-запросы, чтобы остановить масштабирование. И размер фона, чтобы иметь его 50% –

Если вы хотите управлять размером фонового изображения, независимого от размер страницы, вам нужно поместить ее в свой собственный контейнер.

Например:

<div class="container"> 
    <div class="bkg"></div> 
    <div class="welcome"> 
     <img src='/welcome.png' /> 
    </div> 
</div>

Затем вы можете использовать CSS, как:

.bkg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    max-width: 300px; 
    max-height: 300px; 
    padding-bottom: 100%; 
    background: url(/freewifilogo.png) 0 0 no-repeat; 
    z-index: -1; 
}

position: absolute; берет его из потока контента, так что не влияет на приветственное изображение.

В качестве примера см. this Fiddle. У меня не было приветственного изображения, поэтому в качестве примера я заменил его заголовком.

источник

2015-02-18 17:04:54 bobdye

Благодарим за помощь. – SpeedyNinja

Я не знаю, что вы хотите точно, но посмотрите на это решение:

<body> 
    <div align="center"> 
     <img src='http://www.getfilecloud.com/blog/wp-content/uploads/2014/01/building-blocks.jpg' /> 
    </div> 
</body> 

body { 
background: url('http://ahdimages.com/wp-content/uploads/2014/03/background-pictures-6.jpg'); 
background-repeat: no-repeat; 
background-size: 100%; 
} 

img { 
margin-top: 10%; 
} 

@media (max-width: 300px) { 
    body { 
background: url('http://ahdimages.com/wp-content/uploads/2014/03/background-pictures-6.jpg') no-repeat 50%; 
}

}

http://jsfiddle.net/r0qz2xep/

источник

2015-02-18 15:27:01 Abdooapps

Масштабирование фонового изображения

ответ

Смежные вопросы