(CSS) Applying "background-origin: border-box" to the body tag...

Forum|Forum|9 years ago
April 5, 2017
5 replies
616 views

Would I be a complete idiot to add "background-origin: border-box" to my body tag; so that I never have to worry about background alignment again? I just learned about the property, and feel like "border-box" should have been the default behavior from the start, not "padding-box" (as is the case now).

Am I overlooking potentially nasty side-effects by trying to make "border-box" the default behavior, which is what I'm assuming applying it to the body tag will do?

This topic is closed to new replies. Start a new post to keep the conversation going.

Correct answer Nancy OShea

You would need to apply box-sizing property to everything inside your <body>. And to do that you can use the asterisk (*) which is a wildcard selector.

* { box-sizing: border-box; }

If you use a framework like Bootstrap, it's already been taken care of. No need to define it again.

Nancy

Nancy OShea

Correct answer

Community Expert

You would need to apply box-sizing property to everything inside your <body>. And to do that you can use the asterisk (*) which is a wildcard selector.

* { box-sizing: border-box; }

If you use a framework like Bootstrap, it's already been taken care of. No need to define it again.

Nancy

Nancy O'Shea— Product User & Community Expert

U

Under S.Author

Inspiring

Just to make sure I understand -- are you saying that simply adding the property to the body tag will affect only the body tag and not all child elements; but the asterisk 'wildcards' them all in?

Assuming this is correct, what is your opinion on this practice? Generally safe and possibly helpful design-wise, or potentially troublesome down the road?

Nancy OShea

Community Expert

Yes. Body selector = <body> tag.

The wildcard * selector is an expedient way to include every HTML element within the <body> without naming each one. If you want to be selective, don't use the asterisk. Name each selector with a comma between.

article,aside,audio,details,dl,figcaption,figure,footer,header,hgroup,img,main,menu,nav,section,summary, etc.....

Nancy

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.