Tribute Page/CodePen Pro

Tribute Page/CodePen Pro
0

#1

So, I am working on my tribute page and I went to add a picture and found out that you have to be a pro user in order to do this. Is there any way around this? I am not spending $108 for this as I have already spent enough on my learning so far. I understand it may well be worth it, but I just am not going to do it right now.


#2

Learn the basics of Git*, download a good text editor (personally I’m loving Sublime Text* right now), then host on Github* and use Github Pages*. You can host your images on Github for free.

There’s a bit of a learning curve to each part of that, but they’re all things you’ll have to learn eventually anyway - might as well start early.

There are a few alternatives (image hosting websites such as 500px.com or even directly embedding the images with data URIs), but the text editor + Github Pages method is far superior in the long term for reasons far beyond image hosting (more powerful and extensible, no weird bugs, and uses Git for version control).

*Googlable terms with lots of documentation/learning resources available.


#3

I use TinyPic to host my image files for my CodePen projects.

Admittedly I haven’t had time to learn about Git yet, so thanks for the tip Lionel-Rowe.


#4

You can share your photos through a cloud service like Dropbox. Get the URL for your resource and throw that on your page.


#5

Cloudinary works very well and it’s free.


#6

Thanks for all of the info guys. I found a way to embed it on my site via the CSS. However, would any of you know how I would go about changing the opacity of this image that I am using as the background. I can’t target it because it is embedded in the css and every other avenue I have tried hasn’t worked. Hope this isn’t too stupid of a question. I am trying to get a hang of this.


#8

Thanks llonel. I have done that. Trust me that is always my first go to. The img is strictly embedded into the css and not the html. So, the traditional method does not work.


#9

Sorry, I can’t read. Can you post a link to the page? Difficult to get a handle on the problem otherwise.


#10

https://codepen.io/SMcNeil_87/project/editor/XaoVYY/ I want to make the background image transparent and found out how to do it if the image is hosted in the HTML but it’s not so I am kind of stuck.


#11

There is no CSS for changing opacity of a background image, but you can fake it with pseudo element.
https://css-tricks.com/snippets/css/transparent-background-images/

I’m not sure if this is what you’re looking for, but I hope it helps.


#12

Thank you Aledk! I will keep this in mind as I am actually going to go a different route with this image.