I agree with this.
2 Likes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
coded by nighted
1 Like
I don’t know how I feel about this.
@astrophile There was a person in the html playground in wattpad community, they had added a monochrome background image and then applied background color to it, like, if the background picture was black and white, then they had added a layer of color on that, so that it was looking like the design was done on the background color they added.
How can I do that?
I’m not sure what you mean.
Shall I show you her post?
Sure?
Here, this is what she had done. But when try to do this thing in another format or in another picture, it doesn’t work.
Was the image a transparent image?
That, I don’t know. One can do this with transparent image? What is a transparent image?
A transparent image doesn’t have a background.
Yes, but how would I know that it is a transparent image? By searching for it on google?
Yes.
1 Like
I hope you don’t mind me asking, but how did you put a box inside a box?
3 Likes
Span inside of a span, basically, or do you mean something else?
2 Likes
Um, let me go test & then I’ll see xD
Thank you!
2 Likes
Don’t worry about getting it right just yet. I plan to go over that in unit 8 in the coding class.
2 Likes
Okay so I have another question. They both are somewhat mobile friendly (not really xD) but my problem is that, in the second one, the words aren’t contained in the code yet in the first one they are. (When looking at it through mobile)
Welcome to Greeky’s
Welcome to Greeky’s
<span style="font-size: 50px; font-family: Palatino; text-align: center; display: block; color: #862d59; background-color: #e65c00; background: url(https://i.pinimg.com/originals/78/b1/0f/78b10f10cabc80fa9bdbe36855161a48.gif) no-repeat bottom center, url(https://media3.giphy.com/media/BEWzqDUQOr5DO/giphy.gif) no-repeat top left, url(https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm21-smoke-bb-5_1.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=c8347a73d6427dda5d03bd1100c39354) no-repeat center; background-size: 150px, 110px, auto; border: 13px; border-style: double; border-color: black; padding: 10px; margin: 10px;"><span style="font-size: 50px; font-family: Brush Script mt; display: block; background-image: url('https://24.media.tumblr.com/tumblr_m1rn12n6qy1qh3v5mo1_500.jpg'); background-size: 100px; background-position: left; border: 10px solid; padding: 10px; margin: 60px;">Welcome to Greeky's </span></span>
<span style="font-size: 50px; font-family: Brush Script mt; color: #1f1f2e; text-align: center; display: block; background-image: url('https://24.media.tumblr.com/tumblr_m1rn12n6qy1qh3v5mo1_500.jpg'); background-size: 100px; background-position: left; border: 10px solid transparent; border-radius: 20px; height: 100px; padding: 50px; margin: 50px;">Welcome to Greeky's </span>
1 Like
So, in the second one, you have a defined height/width for the span containing the text, which leads you to have overflow when on a screen size that squishes the whole code together. Adding in an overflow: scroll; should fix it. You could also remove the defined height or increase it.
1 Like
[ reposted ]
1 Like