Report Blog Entry
OK! I've seen a lot of people ask about backgrounds for their page. There's so many ways you can do backgrounds. Let's figure out the best way to do them so your background looks great on mobile and desktop.
I want to use this as my background:
First thing first, let's set a background image to the page:
<style> body{ background-image:url('https://media.giphy.com/media/Ph0oIVQeuvh0k/source.gif'); }</style>Let's see how that looks:
OK, that's not bad. That'll put color bars in the background. Most people would be happy here. Also, sorry Brooke for using your profile! You were new when I started writing this and your profile was untouched. Everyone go add Brooke.Â
Anyway, this is what this looks like on desktop. Not bad. But what about mobile?
Oh. you can't see the background. OK! Let's add something to our code so that the background shows through the white in the background, because on cell phones, that's all we can see.
<style> body{ background-image:url('https://media.giphy.com/media/Ph0oIVQeuvh0k/source.gif'); } main{ background-color:rgba(255,255,255,0.5); }</style>So, if you used to do colors on MySpace back in the day, you know what Hex Colors are. They look like #123456 and they're shortcodes for colors. RGBA is a different color scheme that does the same thing. Hex Colors calculate red, green and blue values using the first two (red), the second two (green) and the last two (blue) colors, in a weird numbering system that goes from 00 to FF. So, if you have #FF0000 you'd have pure red, because there's no green and no blue but all the red. RGBA is the same basic idea, except the values go from 0 to 255 AND there's a fourth value, alpha, which sets how transparent the color is! So we can set a pure white background color that's 50% transparent with the code above. Now how does it look on mobile?
That's a whole lot better. Again, sorry Brooke.Â
If you want the background darker, use rgba(0,0,0,0.5) instead, and that'll tint the background black instead of white.Â
I hope this helps!
Comments
Displaying 7 of 7 comments ( View all | Add Comment )
FELIX C
OMG THANK YOU SO SO SO SO SO SO SOOO MUCH THIS IS EXACTLY WHAT I WAS NEEDING!!!
mak :>
the background tint doesnt work :(
add your own image url
by Fluid Dynamic; ; Report
LizzieTheShortie
is a way to make my image smaller?
change the height n width its in the code
by tester; ; Report
where exactly is it in the code?
by BluMndy; ; Report
Kash_Koda2212
i tried it with other images and it always works but when i tried it with this image: https://i.imgur.com/wAoOmbS.png it doesnt work at all, any answers to why?
you gotta use jpg
by sal (AKA thelonelieststarz); ; Report
livelaughlorena
This finally worked!! ty!
z
this is the ONLY code that has worked for me so far, thank you so much!
alyssa ciervo
i tried this code it didnt work