Replies

May 22, 2020 5 years ago
Nrogara
made a living
User Avatar
Problobly

this is the code I'm using for the background: body{background-repeat: repeat; background-image: url(https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)} it's from one of Lea's profiles, but I can't get it stop repeating, no matter what I replace "repeat" with. I've tried "fixed," "static," "none," "stretch," and various combos of them but obviously I'm missing the magic word. Help?


(art by KayBit on Dappervolk)

May 22, 2020 5 years ago
Elementary, my dear
Written
User Avatar

Have you tried no-repeat?

body{background-repeat: no-repeat;

The past is written, but the future is left for us to write. ~ Picard

May 22, 2020 5 years ago
Nrogara
made a living
User Avatar
Problobly

ahh there it is - except that now I need it to stretch to fill the screen?


(art by KayBit on Dappervolk)

May 22, 2020 5 years ago
Elementary, my dear
Written
User Avatar

For that you will need another background property: background-size. You can either do it as a percentage (100%) or use the word "cover". They mostly do the same thing but they might act differently in different situations (like on mobile).

background-size: cover; background-size: 100%;

The past is written, but the future is left for us to write. ~ Picard

May 22, 2020 5 years ago
Nrogara
made a living
User Avatar
Problobly

oh dear now when I put that in it goes to blank grey. Am I doing something in the wrong order? body{background-repeat: no-repeat; background-image: url(https://images.unsplash.com/photo-1523906630133-f6934a1ab2b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80) background-size: 100%;} thanks for helping me out btw!!


(art by KayBit on Dappervolk)

May 23, 2020 5 years ago
Elementary, my dear
Written
User Avatar

No problem. I think it's more like something is wrong with your URL - background works best with urls that end in an image extension like .jpg or .png. If you really like that image you should download it and upload it to a site like imgur so that you can get such an extension. I believe that would solve the problem.

On another note, though, I'd see if you can't find a larger version of the image, because when you stretch out something that small, it doesn't look as nice (all pixely and blurry). Usually something around 1920x1080 works best.

Edit: Here is that same image on Unsplash, with options to download in pretty large sizes. Also if you've never used imgur before, you'll probably want to create an account so you can find and edit your posts later (although you can post without one).

The past is written, but the future is left for us to write. ~ Picard

May 23, 2020 5 years ago
Nrogara
made a living
User Avatar
Problobly

that makes sense, I downloaded it and put it on imgur, but I'm still getting grey... would this background color part of code be changing it? When I tried removing it before, everything just changed to white instead. I'm assuming it's what shows as the image loads? But just in case: body{background-repeat: no-repeat; background-image: url(https://imgur.com/nKvik7F.jpeg) background-size: 100%;}

/* colors*/

body{background-color: }


(art by KayBit on Dappervolk)

May 23, 2020 5 years ago
Elementary, my dear
Written
User Avatar

The fun thing about coding is that just one little thing can throw off the whole kit and kaboodle.

I think if you add the semi-colon behind the end parenthesis around the image URL, it should work!

If not, I'd be happy to help you figure out something else.

ETA: There should also be a semi-colon after all those e's if there isn't already.

The past is written, but the future is left for us to write. ~ Picard

May 23, 2020 5 years ago
Nrogara
made a living
User Avatar
Problobly

ahhhh you are a lifesaver, just came back and tried that and presto! It worked! does a happy dance Who knew semi colens could be so important? Thanks a million!


(art by KayBit on Dappervolk)

May 23, 2020 5 years ago
Elementary, my dear
Written
User Avatar

Super important!

You're welcome, and thank you for all the flowers!

The past is written, but the future is left for us to write. ~ Picard

May 23, 2020 5 years ago
Nrogara
made a living
User Avatar
Problobly

least I could do! ^-^


(art by KayBit on Dappervolk)

Please log in to reply to this topic.