ii. The Coder's Society

coding
tcs

#561

Thank you!


#562

Um okay so how do I make the image bigger? :joy: I think I just pick a small image to use


#563

background-size: 400px;

Read more about it here:

https://www.w3schools.com/cssref/css3_pr_background-size.asp


#564
<img width="100" height="100" src="https://discourse-cdn-aws1.com/wattpad/original/2X/8/87856419debeb693578ce1c88ec247b8f0094bc6.png">

#565

Given how much more flexible the coding is on here I would’ve expected more threads under the ‘coding’ tag but it seems like less people code now than on the old forums?


#566

Agreed


#567

Also hi sock :joy:


#568

Hey Greekyyy :smiley:


#569

This text will be blurred

This text will be blurred

Huh. That is odd. The second one looks like it has glowing letters.


#570

aye you did it o:


#571


#572

How can I center the blocks?

Happy
Birthday
You!
image

<span style="font-size: ; display: block; height: 900px; width: 450px; margin: auto; padding: 100px; border-radius: 10px; background-image: url('https://i.pinimg.com/originals/fb/d8/3d/fbd83defe6b9eb920562e6d49ccea50f.gif'); background-size: 1000px 2000px; background-attachment: fixed;"><span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: lightcoral; background-image: url('https://media.giphy.com/media/BHNfhgU63qrks/source.gif'); border-style: inset; border-width: 7px; text-align: center; border-color: lightcoral; font-variant: small-caps;">Happy</span> <span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: white; background-image: url('https://cdn.dribbble.com/users/626327/screenshots/2618501/attachments/523086/800.gif'); border-style: inset; border-width: 7px; text-align: center; background-position: center; border-color: lightblue; font-variant: small-caps;">Birthday</span> <span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: rebeccapurple; background-image: url('https://media.giphy.com/media/26ufp2LYURTvL5PRS/source.gif'); border-style: inset; border-width: 7px; text-align: center; background-size: 500px; background-position: center; border-color: lavender; font-variant: small-caps;">You!</span> <span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: darkmagenta; background-image: url('https://i.pinimg.com/originals/7f/15/6a/7f156ab6d8739e4a383f4ffd7fa7bb64.gif'); border-style: inset; border-width: 7px; text-align: center; background-size: 500px; background-position: center; border-color: skyblue;">![image|72x72](upload://spujcXGBF2lep5tNbQBKjmcogHK.png)</span></span>


#573

For the container span:

  • Change the padding from ‘100px’ to ‘100px 0 100px 0’.
  • Increase the width by 200px

Demo

HappyBirthdayYou!image

<span style="font-size: ; display: block; height: 900px; width: 650px; margin: auto; padding: 100px 0 100px 0; border-radius: 10px; background-image: url('https://i.pinimg.com/originals/fb/d8/3d/fbd83defe6b9eb920562e6d49ccea50f.gif'); background-size: 1000px 2000px; background-attachment: fixed;"><span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: lightcoral; background-image: url('https://media.giphy.com/media/BHNfhgU63qrks/source.gif'); border-style: inset; border-width: 7px; text-align: center; border-color: lightcoral; font-variant: small-caps;">Happy</span><span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: white; background-image: url('https://cdn.dribbble.com/users/626327/screenshots/2618501/attachments/523086/800.gif'); border-style: inset; border-width: 7px; text-align: center; background-position: center; border-color: lightblue; font-variant: small-caps;">Birthday</span><span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: rebeccapurple; background-image: url('https://media.giphy.com/media/26ufp2LYURTvL5PRS/source.gif'); border-style: inset; border-width: 7px; text-align: center; background-size: 500px; background-position: center; border-color: lavender; font-variant: small-caps;">You!</span><span style="font-size: 68px; display: block; font-family: book; height: 50px; width: 300px; margin: auto; padding: 50px 100px 100px 100px; border-radius: 10px; color: darkmagenta; background-image: url('https://i.pinimg.com/originals/7f/15/6a/7f156ab6d8739e4a383f4ffd7fa7bb64.gif'); border-style: inset; border-width: 7px; text-align: center; background-size: 500px; background-position: center; border-color: skyblue;">![image|72x72](upload://spujcXGBF2lep5tNbQBKjmcogHK.png)</span></span>


#574

Thank you very much!


#575

Just a heads up but post #572 is cut off on mobile.


#576

Is it now?

Happy
Birthday
You!
image


#577

See for yourself:

image

image


#578

Oof! Well, I should probably change the font size or something then. Thank you too!


#579

Good luck!


#580

Sorry if this has already been answered, but what width should I set an image to if I want it to fill up the comment box?