2016-04-25 4 views
0

Я пишу веб-приложение, и я испытываю странное поведение в своем приложении.Странное поведение в HTML-странице

В основном, я установил background-image, и на сайте width продолжает проходить изображение length.

Вот PrintScreen:

enter image description here

Что я могу сделать, чтобы исправить это?

Я устанавливаю фон с этой линией:

<header style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(<?php echo base_url('assets/pagina_voluntario.jpg');?>);"> 
     <div class="header-content"> 
      ... 
     </div> 
    </header> 
+4

Какой код вы писали? – Wowsk

+1

Поделитесь с нами кодом, который вы написали, чтобы мы могли видеть, что вы сделали. – JoeL

+0

Возможно, это помогает «background-size: url (« ... ») cover', и вот сайт о вашем вопросе https://css-tricks.com/perfect-full-page-background-image/ –

ответ

2

поведением по умолчанию background-image является, чтобы отобразить изображение один раз это нормальный размер. Если область просмотра больше, чем фоновое изображение, изображение не будет масштабироваться или повторяться.

Это можно исправить, хотя с background-size: cover, что делает фон «обложкой» всего пространства без искажения пропорций фонового изображения.

Таким образом, вы должны установить размер вашего фона изображения, как это:

background-image: url(http://...); 
background-size: cover; 

Не все браузеры поддерживают свойство сопроводительное в CSS, (унаследованный IE и старые версии Safari, например), но я продолжаю приходить назад к способу перехода на аварийном режиме вы можете добавить в передней части современного (и, вероятно, более эффективного) cover подхода, чтобы он не совершенно не на старых браузерах:

background: url(img2x.jpg) 0% 0%/100%; 

(см оригинального ответа here)

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