If this was related to Discourse not containing images within the boundaries of replies, it should be fixed now. 
3 Likes
Ah, no, this isn’t about images. This is about span widths.
3 Likes
Ahh well. My bad sorry 
4 Likes
Thank you! 
3 Likes
Hi! I was just catching up and wanted to turn in the assignment anyway~ hope that’s okay
One morning I shot an elephant in my pajamas. How he got into my pajamas I’ll never know.
If you’re going to tell people the truth, be funny or they’ll kill you.
The cure for boredom is curiosity. There is no cure for curiosity.
4 Likes
That’s fine. Let me know if you have any questions.
4 Likes
I don’t know you could change the border color like that! I must’ve over read that… makes note of it
2 Likes
glad to know I helped 
2 Likes
6 Likes
Death is not your destiny today, little sparrow.
5 Likes
Unit 4: More Fun With CSS
Calling all students!
@flyingCouch @xinmure @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
Hopefully, you all are a bit more familiar with inline css by now. It’s essential that you understand it inside and out when coding. Without inline css, threads would be so boring. This time, we’ll be exploring a few new properties, which can help you prettify your threads, so let’s dive right in with some code.<span style="font-size: 16px; color: white; display: block; background-image: url('https://66.media.tumblr.com/92d89695d6a82d1aba3a6d59ef480b3d/tumblr_inline_mk7b0eproS1qz4rgp.png'); background-size: 100px; background-position: left; border: 10px solid transparent; border-radius: 20px; width: 200px; height: 200px;">Pretend this says something important.</span>background-image may look scary but it’s just a way for us to express that we want an image to be displayed behind the words of our span. Take a closer look at the formatting. The url portion along with the parentheses after it to contain the url is essential. The code still works without the single quote marks but I include them for clarity. As best practice for coding, I recommend using repeating backgrounds.background-size resizes the background so that it can be displayed properly behind your words.background-position defines which part of your image should be used.border-radius makes your border rounder. The larger the number, the more round.
If you don’t understand any of the new properties I explained above, feel free to click on their name to be directed to a site to learn about them in much greater depth. I’m also here to answer questions.
Using the base code as a starting place, I want you to change the following properties:
● background-image (use a different url, basically)
● background-size
● background-position
● border-radius
As a bonus, if you find the above too easily, I’ve written up an OPTIONAL part two for this assignment:<span style="font-size:; display: block; background-color: skyblue; border: 10px solid transparent; border-image: url('https://cdn.wallpapersafari.com/26/79/syOu2P.jpg') 30 round; width: 200px; height: 200px;"> </span>
As far as I know, border-image can’t be used at the same time as border-radius (correct me if I’m wrong though but that’s what I remember from my previous bouts of testing). It’s still a fun piece of code regardless. Instead of being stuck with only flat colors as borders, this opens up the possibility of you using images for your borders instead. I recommend repeating backgrounds for this as well.border-image is written in the order of image url and then a number for the width. I’m not sure if any other words can be used in place of round but I’ll let you all figure that out if you choose to.
I threw in border: 10px solid transparent; because you can’t have a border-image without a border. Try removing it from the code and see what happens. The values aside from 10px don’t seem to change the code. If you decide to try part two, you can change any part of the base code as you see fit. Just don’t submit the exact same thing back to me. It’s an easy way to get an extra point on this.
Direct reply to this message with your submission by September 7th 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!
13 Likes
Background-position link isn’t working.
4 Likes
5 Likes
Can you clarify what you mean?
4 Likes
I see the border designs on my laptop but not on mobile. Good thing that part’s optional.
4 Likes
Here. Link for every other element is working, except for this one.
4 Likes
Oof. Try now?
Turns out, I wrote a hhref instead of a href in the link’s coding.
4 Likes
All good now. 
Also also I found out you can write stretch instead of round for the border image (and some other I forgot about), but, for most images, it doesn’t change much…
4 Likes
Sweet. Thanks for pointing it out. I’m not impermeable to coding typo’s. 
Woah, that’s neat. Shame it doesn’t really change much though for most images.
4 Likes