I am still working on that portfolio page and wanted to use an image I found on Unsplash as a background image. However, using the full URL from the website does not work. I scoured the internet for knowledge and so far I understand the following:
the image being used must be a jpg png or gif file
*I don’t understand what that means, or how to make an image become a jpg png or gif because I’m a programming/tech newborn
to use the image file (jpg…), it must be stored in same place hosting your code
*I don’t save/store my code anywhere. I just write it in codepen.
since I use codepen exclusively, I need to upload the image to my codepen, riiiiiight?
this means I need to upgrade to codenpenPRO in order to use their “Assets” feature (uploading images, libraries, videos, etc) right?
Is all of this correct? If not, please have mercy on my google-surfing soul. I have been googling background images, jpg files for background images, how to code a background image, how to convert an image to a jpg, how to… for far too long.
I will also mention that this is the first step I decided to take for my portfolio (I wanted something nice to look at as I worked) and it promptly kicked my butt. I’m stuck on step one But not for lack of trying. My extensive googling turned up a lot of code that (surprisingly!) makes sense to me and seemed to work for other people. But none of it worked for me. I’m sure it would have, if I had input the image information correctly. THAT’S the problem. Looks like I’m lacking some fundamental knowledge on how image files work.
That’s correct, most modern browser should support at least those 3 formats, some also support SVG and others. Here’s a good chart on wikipedia showing which browsers support what Comparison of web browsers - Wikipedia.
That’s not correct, you should be able to use any publicly available graphic on another domain.
As an example, I created this codepen and put a random image from google in the bodys background and it worked.
As per above, you shouldn’t need to purchase codepens pro features to accomplish what you’re trying to do.
So your first step is actually going to be CSS.
To give the body (entire) page that background, your CSS code will look like:
background-image: url("");
}```
Inside the double quotes, you'll put the entire URL of your image.
In addition, you'll want to add, below background-image, something like:
``background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;``
This ensures that the background will fill the entire page, not repeat, etc. (pretty straight-forward).
Aside: to learn this stuff, you really just have to **do** it, and understanding will come with consistent **doing**.
If you want to use Unsplash, their [documentation](https://source.unsplash.com/) says:
To get a specific photo, simply append its photo ID to the embed URL. You can also embed a specific size.
* The photo ID can be found in the address bar in the standalone photo page.
Parameters
``https://source.unsplash.com/{PHOTO ID}/{WIDTHxHEIGHT}``
Example
``https://source.unsplash.com/WLUHO9A_xik/1600x900``
HTML Example
```<img src="https://source.unsplash.com/WLUHO9A_xik/1600x900">```
And they have this resource to show you how to get a specific photo ID: [http://quick.as/x3vycpgog](http://quick.as/x3vycpgog)
Keep in mind there are not normally so many steps involved in grabbing an image URL. That's just Unsplash. If I do a Google image search, find an image, and click View Image, the image will open in a separate tab and I can just copy/paste the entire link in the address bar.
Copyright infringement is a separate issue, however. So going to Unsplash first was a good first step. For my first project, I stole all kinds of images and thought nothing of it.
Also, keep in mind: most sources, [like this one](http://www.wix.com/blog/2015/02/5-golden-tips-for-creating-fullscreen-website-backgrounds/), recommend the image size be at least 1250×800 or larger with the same proportions.
Thank you @joesmith100 and @icartusacrimea!! I saw that by using a random google image, which is already a jpg, it would work. But providing that link to the unsplash documentation helped me use the actual image I wanted so I’m really happy!! Thank you!!
@nitelight5 you cannot display images on codepen from your computer. you need to upload them some image hosting website like dropbox first and then you could copy the url and paste it into your code e.g.
But not for lack of trying. My extensive googling turned up a lot of code that (surprisingly!) makes sense to me and seemed to work for other people. But none of it worked for me. I’m sure it would have, if I had input the image information correctly. THAT’S the problem. Looks like I’m lacking some fundamental knowledge on how image files work.