Css background 100 vertical

background-position-y

The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin .

Try it

The value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it.

Syntax

/* Keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* values */ background-position-y: 25%; /* values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* Side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* Multiple values */ background-position-y: 0px, center; /* Global values */ background-position-y: inherit; background-position-y: initial; background-position-y: revert; background-position-y: revert-layer; background-position-y: unset; 

The background-position-y property is specified as one or more values, separated by commas.

Values

Aligns the top edge of the background image with the top edge of the background position layer.

Aligns the vertical center of the background image with the vertical center of the background position layer.

Aligns the bottom edge of the background image with the bottom edge of the background position layer.

The offset of the given background image’s horizontal edge from the corresponding background position layer’s top horizontal edge. (Some browsers allow assigning the bottom edge for offset).

The offset of the given background image’s vertical position relative to the container. A value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of 50% vertically centers the background image.

Formal definition

Initial value	0%
Applies to	all elements
Inherited	no
Percentages	refer to height of background positioning area minus height of background image
Computed value	A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animation type	a repeatable list of

Formal syntax

background-position-y =
[ center | [ [ top | bottom | y-start | y-end ]? ? ]! ]#

=
|

Examples

Basic example

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image’s horizontal and vertical positions separately.

HTML

CSS

div  width: 300px; height: 300px; background-color: skyblue; background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS Stretch background div to 100% vertical even when content is overflowing

The following tutorial shows you how to use CSS to do «CSS Stretch background div to 100% vertical even when content is overflowing».

CSS Style

The CSS style to do «CSS Stretch background div to 100% vertical even when content is overflowing» is

html, body < height:100%; background:#333; margin:0; > .container_fullscreen !-- ww w . de m o 2s .c o m --> width:100%; background:#ccc; margin:0 auto; overflow:auto; > .BRC_main_wrapper < height:100%; top:0px; bottom:0px; padding:0px; width:100%; margin:0 auto; > .BRC_main_sidenav < width:120px; height:100%; top:0px; bottom:0px; float:left; > .BRC_grid_4columns < min-width:275px; width:100%; max-width:357px; float:left; > .BRC_grid_activegutter < margin:8px; >

HTML Body

body> div >"container_fullscreen"> div >"BRC_main_wrapper"> div >"BRC_main_sidenav">  !-- w ww . d em o 2 s. c o m --> div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#618DB6" height="150">     div >"BRC_grid_activegutter BRC_grid_gutterstandalone">  table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#618DB6" height="150">      div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#6DC982" height="326">      div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#82AFBF" height="326">      div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#618DB6" height="150">      div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#618DB6" height="150">      div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tbody> tr> td bgcolor="#618DB6" height="150">        

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> html, body < height: 100%; background:#333; margin: 0; > .container_fullscreen !-- w w w . d e mo 2 s . c o m--> width: 100%; background:#ccc; margin: 0 auto; overflow: auto; > .BRC_main_wrapper < height:100%; top: 0px; bottom: 0px; padding: 0px; width:100%; margin: 0 auto; > .BRC_main_sidenav < width:120px; height:100%; top:0px; bottom:0px; float:left; > .BRC_grid_4columns < min-width:275px; width:100%; max-width:357px; float:left; > .BRC_grid_activegutter < margin:8px; >  body> body> div >"container_fullscreen"> div >"BRC_main_wrapper"> div >"BRC_main_sidenav">  div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#618DB6" height="150">    div >"BRC_grid_activegutter BRC_grid_gutterstandalone">  table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#618DB6" height="150">     div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#6DC982" height="326">     div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#82AFBF" height="326">     div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#618DB6" height="150">     div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#618DB6" height="150">     div >"BRC_grid_4columns BRC_grid_activegutter"> table width="100%" border="0" cellspacing="0" cellpadding="5"> tr> td bgcolor="#618DB6" height="150">        

Related

• CSS SPAN inside DIV prevents text-overflow:ellipsis
• CSS stop scroll bar from covering div content with auto overflow
• CSS stop scroll bar from covering div content with auto overflow (Demo 2)
• CSS Stretch background div to 100% vertical even when content is overflowing
• CSS Text inside span should overflow on div with ellipsis
• CSS text-overflow: ellipsis not working in a div containing a div in Chrome
• CSS Text overflow in div tag

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Чтобы фоновая картинка страницы растягивалась по вертикали на весь экран

Может кто сможет ответить на вопрос: как сделать, чтобы фоновая картинка сайта растягивалась вертикально?

Я нашла стиль для горизонтального растягивания фоновой картинки:

Существует ли что-то подобное для вертикального растягивания фоновой картинки сайта?

Изменено 22 апреля 2015 пользователем StOK

Ссылка на комментарий

Поделиться на других сайтах

8 ответов на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник