Help Making the colored background a different width than full page

[SheSaidWhat]

I am having issues with making this black background a different width. I'm not sure where to find this in the BBC guide, it's not under the background section and I'm new this this site and its coding.

 

[deer]

I am having issues with making this black background a different width. I'm not sure where to find this in the BBC guide, it's not under the background section and I'm new this this site and its coding.

Hello!

If you're using bbcode, you can use this code: [centerblock=80]background and color code here[/centerblock].
The centerblock can 'narrow' the width of the code, making it more 'centered' on the screen. It's all mobile-friendly but this coding is not universally used since screen and zoom size will affect how the template is seen.

Here's an example:

Sample text here!
Depending how wide and narrow you'd like your code, you can start the number from 100-50! I stopped at "50" because any smaller it may be difficult to read.

[centerblock=80][bg=black][color=white]Sample text here!
Depending how wide and narrow you'd like your code, you can start the number from 100-50! I stopped at "50" because any smaller it may be difficult to read.[/color][/bg][/centerblock]

Another alternative is essentially adding 'width' where 'bg' is. However, it's recommended to use 'border' instead as it's more functional!


So, by using the 'border' code you'd have various ways to implement different layouts and designs. If you'd like to add a background-image to your code and/or use more "advanced" coding, you'd want to use this code: [border=0px; max-width: 750px; margin: auto;][/border]

The 'border' code acts like 'divs'. However, instead of writing 'div', you'd write 'border=0px;' instead! You'd give a specific "width=#px" depending how narrow you'd like your code. The 'margin: auto;' tag keeps your entire template centered.

Here's an example:

Sample text here!
There's a specific width of "980px". I've added "max-width" since it assist with keeping the code mobile friendly and keeps the code in the width you've set. Essentially this would help keep the width universally the same on all and every screen.

The padding is 10px; which gives 'negative' spacing inside your template. I also added a no-repeat tag and for the background to set at 100%. I hope this helps!

[border=0px; 
     max-width: 980px;
     background: url('https://cutewallpaper.org/21/desktop-backgrounds-tumblr-aesthetic/laptop-wallpaper-tumblr-1120274-in-2019-Aesthetic-desktop-.jpg') no-repeat;
     background-size: 100%;
     padding: 10px;
     color: white;
     margin: auto;]Sample text here!
There's a specific width of "980px". I've added "max-width" since it assist with keeping the code mobile friendly and keeps the code in the width you've set. Essentially this would help keep the width universally the same on all and every screen. 

The padding is 10px; which gives 'negative' spacing inside your template. I also added a no-repeat tag and for the background to set at 100%. I hope this helps![/border]

 

[SheSaidWhat]

Hello!

If you're using bbcode, you can use this code: [centerblock=80]background and color code here[/centerblock].
The centerblock can 'narrow' the width of the code, making it more 'centered' on the screen. It's all mobile-friendly but this coding is not universally used since screen and zoom size will affect how the template is seen.

Here's an example:

Sample text here!
Depending how wide and narrow you'd like your code, you can start the number from 100-50! I stopped at "50" because any smaller it may be difficult to read.

[centerblock=80][bg=black][color=white]Sample text here!
Depending how wide and narrow you'd like your code, you can start the number from 100-50! I stopped at "50" because any smaller it may be difficult to read.[/color][/bg][/centerblock]

Another alternative is essentially adding 'width' where 'bg' is. However, it's recommended to use 'border' instead as it's more functional!


So, by using the 'border' code you'd have various ways to implement different layouts and designs. If you'd like to add a background-image to your code and/or use more "advanced" coding, you'd want to use this code: [border=0px; max-width: 750px; margin: auto;][/border]
The 'border' code acts like 'divs'. However, instead of writing 'div', you'd write 'border=0px;' instead! You'd give a specific "width=#px" depending how narrow you'd like your code. The 'margin: auto;' tag keeps your entire template centered.

Here's an example:

Sample text here!
There's a specific width of "980px". I've added "max-width" since it assist with keeping the code mobile friendly and keeps the code in the width you've set. Essentially this would help keep the width universally the same on all and every screen.

The padding is 10px; which gives 'negative' spacing inside your template. I also added a no-repeat tag and for the background to set at 100%. I hope this helps!

[border=0px; 
     max-width: 980px;
     background: url('https://cutewallpaper.org/21/desktop-backgrounds-tumblr-aesthetic/laptop-wallpaper-tumblr-1120274-in-2019-Aesthetic-desktop-.jpg') no-repeat;
     background-size: 100%;
     padding: 10px;
     color: white;
     margin: auto;]Sample text here!
There's a specific width of "980px". I've added "max-width" since it assist with keeping the code mobile friendly and keeps the code in the width you've set. Essentially this would help keep the width universally the same on all and every screen. 

The padding is 10px; which gives 'negative' spacing inside your template. I also added a no-repeat tag and for the background to set at 100%. I hope this helps![/border]

Thank you so much for the help! I will probably use the more simple method for now but knowing i can put a background is awesome!