html - background-image appearing in the body margin -

-

i have thought background-image of element appears in element itself, padding , border not margin. however, while trying else work discovered seems not case , background-image appearing in margin.

body {      background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");      background-size: contain;      background-repeat: no-repeat;      border-width: 1px;      border-style: solid;      border-color:red;      margin: 50px;  }
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

https://jsfiddle.net/rz52z14r/

as can seen, background appearing in margin. additionally, if add in overflow: hidden overflow not hidden. again, under impression overflow outside bounds of element, i.e., element , padding not including margin.

so, overall: why background image appearing in margin? , why overflow not hidden?

edit: there have been few similar answers question; of provide solution situation. however, situation fictional. know why behaviour occur on the <body> tag not other tag?

the reason why occurs because root element treated special case when rendering background. in effect, background not being applied body canvas:

the background of root element becomes background of canvas , covers entire canvas, anchored (for 'background-position') @ same point if painted root element itself. root element not paint background again.

the background (http://www.w3.org/tr/css2/colors.html#background)

but root element in case html element wouldn't it? well, following states preferred apply background body rather html element:

for html documents, however, recommend authors specify background body element rather html element.

the background (http://www.w3.org/tr/css2/colors.html#background)

if background-color , background-image of html element transparent , none respectively rules regarding canvas apply body element instead:

for documents root element html "html" element or xhtml "html" element has computed values of 'transparent' 'background-color' , 'none' 'background-image', user agents must instead use computed value of background properties element's first html "body" element or xhtml "body" element child when painting backgrounds canvas, , must not paint background child element. such backgrounds must anchored @ same point if painted root element.

the background (http://www.w3.org/tr/css2/colors.html#background)

so, make background on body respect margins add background-color html element in css:

html {      background-color: red;  }  body {      background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");      background-size: contain;      background-repeat: no-repeat;      border-width: 1px;      border-style: solid;      border-color:red;      margin: 50px;  }
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


Comments

Post a Comment

Popular posts from this blog

How to show in django cms breadcrumbs full path? -

-
need advice - how show in breadcrumbs whole path article or page? i've got code: {% ance in ancestors %} <li> {% if not forloop.last %} <a href="{{ ance.get_absolute_url }}">{{ ance.get_menu_title }}</a> {% else %} <span class="active">{{ ance.get_menu_title }}</span> {% endif %} </li> {% endfor %} but shows "home" , current page. how modify show whole path in breadcrumbs? i've found in file menu_tags.py code calls ancestors. @ least there class showbreadcrumbs: class showbreadcrumb(inclusiontag): """ shows breadcrumb node has same url current request - start level: after level should breadcrumb start? 0=home - template: template used render breadcrumb """ name = 'show_breadcrumb' template = 'menu/dummy.html' options = options( argument('start_level', default=0, require...
Read more

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

-
Image
i've installed yii2-user module/dektrium yii2-app-basic application command composer require "dektrium/yii2-user:0.9.*@dev" config/console.php return [ . . 'modules' => [ 'gii' => 'yii\gii\module', 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] config/web.php 'components' => [ . . /* 'user' => [ 'identityclass' => 'app\models\user', 'enableautologin' => true, ], */ 'modules' => [ 'user' => [ 'class' => 'dektrium\user\module', ], ], . . ] after that, run command $ php yii migrate/up --migrationpath=@vendor/dektrium/yii2-user/migrations updating database schema . but, when run http://localhost/mylawsuit/yii/web/index.php?r=u...
Read more

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -

-
i have app uses rails framework , implements angularjs part of front end. i have pushed heroku , have heroku toolbelt installed, when try migrate db using "heroku run rake db:migrate" receive following error(s): installing core plugins heroku-cli-addons, heroku-apps, heroku-fork, heroku-git, heroku-local, heroku-run, heroku-status... error installing package. try running again gode_debug=info see more output. ! `run` not heroku command. ! perhaps meant `-h`, `2fa`, `auth`, `join`, `open`, `orgs`, `pg`, `ps` or `rake`. ! see `heroku help` list of available commands. i run command "gode_debug=info heroku run rake db:migrate" , receive error: npm err! darwin 14.5.0 npm err! argv "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/bin/node" "/users/christopher_pelnar/.heroku/node-v4.2.1-darwin-x64/lib/node_modules/npm/cli.js" "install" "heroku-cli-addons" "heroku-apps" "heroku-fork...
Read more