Является ли это HTML после рендеринга, или это от вашего редактора?
Мы были бы признательны, если бы Вы показать нам распечатку экрана вашего приложения-страницы, и ваш HTML после визуализируемого в браузере!
- Будет ли это приложение запускаться в виде фиксированного разрешения/экрана? Если нет, я не думаю, что с обрезанным изображением на ногах ваш экран является хорошим решением, так как есть много других экранов с различными разрешениями там, и если вы хотите, чтобы фон охватывал их все, то это, безусловно, будет быть обрезанным на определенных разрешениях/экранах.
Принимая это во внимание, у вас есть несколько вариантов, чтобы создать полный размер фон для любого типа экранов/резолюций.
Вы можете создать центрированный фон, который будет всегда ноги определенный экран, независимо от того, насколько больше она ни как маленький образ, только с двумя правилами CSS:
.app-background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
z-index: -1;
}
.app-background > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
.приложение-фон будет обертка фона и будет иметь:
- позиция: фиксированная;, чтобы сохранить свое положение, если один из родительских элементов имеет горизонтальную/вертикальную полосу прокрутки, а также не использовать пространство, используемое для содержимого страницы;
- наверх/слева: -50%; ширина/высота: 200%;, чтобы центрировать его и сделать его в два раза размером с его родителем/экраном; (теперь ваше изображение имеет родительский объект, где он может быть центрирован);
- переполнение: скрыто; z-index: -1; просто для обрезки изображения внутри и для обеспечения того, чтобы содержимое страницы не скрывалось за фоном;
.app-фон> IMG будет образ, служащий в качестве фона и будет иметь:
- позиция: абсолютная; top/right/bottom/left: 0; margin: auto; для центрирования изображения по горизонтали и по вертикали внутри .app-background;
- мин-ширина/мин-высота: 50%, чтобы предотвратить изображение от быть меньше, чем 100% от размера разрешения/экрана контейнера.
Концепция (его просмотра в полноэкранном режиме )
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
}
.app-background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
z-index: -1;
}
.app-background > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
/* Instructions below this comment are NOT needed for the solution */
body {
font-family: Calibri, Arial;
text-align: center;
}
body:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
margin-left: -0.25em;
}
*, .border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.app-container {
position: relative;
border: 2px solid red;
color: red;
display: inline-block;
vertical-align: middle;
width: 40%;
height: 40%;
}
.app-background {
position: absolute;
border: 2px solid purple;
color: purple;
}
.app-container:before,
.app-background:before {
content: '.app-background';
font-size: 25px;
display: block;
padding-bottom: 10px;
}
.app-container:before {
content: '.app-container';
}
.app-background > img {
opacity: 0.5;
z-index: -1;
}
<div class="app-container">
<b>This red box is what you will see in your screen.</b>
<div class="app-background">
This purple box is where your image will be centered and cropped.
<img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
<b>Feel free to zoom-in/out your browser to see the effect from different resolutions!</b>
</div>
</div>
Пожалуйста, нажмите на полную страницу кнопку
Solut ион (его просмотр в полноэкранном режиме )
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
}
body > ion-pane,
body > ion-pane > ion-content {
width: 100%;
height: 100%;
}
.app-background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
z-index: -1;
}
.app-background > img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
<body ng-app="starter">
<ion-pane>
<head>
</head>
<ion-content>
<body>
<div class="app-background">
<img src="https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg">
</div>
</body>
</ion-content>
</ion-pane>
</body>
Пожалуйста, нажмите на полной страницы кнопку
где же CSS? – StackOverMySoul
Это не фоновое изображение ... – DaniP