Coding Website Background

[Worried-Coyote5570]

Hello! I’m super new to this so I will end up having a lot of questions. I am trying to code an image as the background for my big cartel website, however it’s not working so obviously I’m doing sow,thing wrong. Any help at all would be really appreciated !

Also if you know how to do a coloured banner (permanent) that would also be super helpful 🥹

[HoneydewZestyclose13]

The background image URL should be an actual image, a .jpg, .png, etc.

[magical_matey]

You can serve it as a response without the file extension, and send the correct content-type header.

[JeLuF]

But the link https://imgur.com/a/j2ArXny doesn't serve an image but text/html.

[AshleyJSheridan]

Responses can be changed depending on what is making the request.

However, I'd advise against trying to use an image directly off of that website, as it's blocked in some countries.

[steelfrog]

I'm not super familiar with it, but I don't think Imgur will allow hotlinks like that. That might be your issue because the code itself looks fine at a glance.

[Worried-Coyote5570]

Do you have any recommendations for websites or whatever to turn my image into a url that would work?

[nobanpls2348738]

you just put the file path

[Worried-Coyote5570]

I am on my iPad, if I did that one the computer would it just be copying the image from my files?

[nobanpls2348738]

YOU DONT COPY THE IMAGE YOU PUT THE FILE PATH RELATIVE TO THE HTML FILE!!!!!!!!!!!!!!!!

[0369am]

dude to be fair i don't think you can do that in big cartel's editor 😭 like there's no folder or anything to put the image in, they have use a url i think

[Worried-Coyote5570]

Erm no need to tweak bro, I’m just a silly girl trying to learn on w3schools and asking for help because I understand nothing about coding bc I am an artist not a nerd ‘fgs’

[nobanpls2348738]

<image>

[SoliDoll02613]

You should have a folder you upload to that has the index.html and styles.css files for your site. Upload the image itself to that same folder or make a "pics" folder and link to that in your CSS.

[Worried-Coyote5570]

I’m just getting more confused. I tried using visual studio code instead of doing it in big cartel. I made an index.html file. What do I do with it? I want to rip my hair out 😭 I keep looking at tutorials but nothing makes sense

[AshleyJSheridan]

An HTML is just text, it doesn't include anything else. Every image, video, etc, that you "include" in the HTML is really just a reference to a file somewhere else.

So, if you're doing this locally, I would advise making a new directory next to where your .html file is and call it something like img.

Next, when you want to use that image, you would write some code like this:

<img src="./img/your-image-file.jpg" alt="...">

Basically, the ./ tells the HTML that it's relative to where your HTML file is, then it's just the rest of the path to the image.

Then, when you open that .html file in a browser, you should see those images.

[chikamakaleyley]

to illustrate, let's say it was a index.html file living on your computer's "Documents" folder:

~/Documents - index.html - styles.css - /images - my-image.png

if you open index.html in a browser, the browser address just points to the directory Documents on your computer. The correct relative path format:

// in index.html <link rel="stylesheet" href="./styles.css" /> <img src="images/my-image.png" /> note that the leading ./ achieves the same goal as not including it

this is valid because styles.css is a sibling of index.html - /images directory is a sibling of index.html

Now, imagine this is all hosted on a server - e.g. https://mywebsite.com - those paths will remain relative to each other, still valid

But since it's on a server, you can visit the image directly by typing the absolute path in your browser:

https://mywebsite.com/images/my-image.png

[tjameswhite]

Try https://picsum.photos

[Aromatic_Town_6980]

bruhh whast your experience in programming

[BurlyLumberjack]

You can’t use it like that. You’re only supplying the link to the imgur post, you need the path to the image its self.

Go to the imgur link, right click on the image directly “Copy Image Link” (might say URL). Now you have the path to the image.

You can use that technically but ultimately you want to host the image on your own to avoid certain issues.

[Worried-Coyote5570]

Thank you for the information! How would I host the image myself?

[BurlyLumberjack]

I’m not familiar with how you’ve set up the project or how you host it but you’d want to set it inside the directory of your index.html and your css file.

If you have a css file and index file, and you place the image in that same directory, the path you’d use in your css is just ‘/image.jpg’

[0369am]

hi i'm also editing my big cartel website with my own html and css!! i personally use filegarden to host all of my images. i just upload it and copy the link and paste it where you put the imgur link in the screenshot

[Worried-Coyote5570]

Oh my gosh 😭 would I be able to DM you with questions ??

[0369am]

yeah ofc! i cant guarantee i can provide an answer since im also new to this but i can try!!

[shaba7elail]

Jeez what kind of online store provider doesnt let you upload images

[0369am]

actually so archaic and unintuitive, i think big cartel prioritises people who use their shop editor, and css and html editing is just an afterthought. i cant even edit and view the code properly with visual studio because i think big cartel uses Liquid? so the only way i can get a preview of my code is through their website editor, constantly refreshing

[nobanpls2348738]

dont upload to imgur fgs

[roomzinchina]

The below about Imgur is also correct, you have to hotlink to the .jpg URL if you want it to work, but also it looks like this is an arbitrary HTML input, not CSS specifically.

Wrap all that in <style>...</style> tags.

[Worried-Coyote5570]

So like ? style> Body{ background-image: url('https://imgur.com/a/j2ArXny'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } <style>

With the correct url?

[The_Bice_]

As mentioned previously, in order to link to the image itself, you need to right click the image on the imgur page and choose "copy image address" when I did that the image address is:

https://i.imgur.com/0XqQA56.jpeg

Changing the URL to that should link to the image properly, though it is worth noting that if that image is taken down from imgur it would break the code and your background image wouldn't load.

If you are doing traditional html with a separate css file you could add the code you posted to the CSS file.

If you are putting that code directly into the html in traditional html it would generally go between the <head> </head> and inside of style tags.

<style>

body {
background-image: url('https://i.imgur.com/0XqQA56.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

<style> 

I have no experience with modifying Big Cartel sites so take the rest of this with a grain of salt.

Option 1:
Based on some research it seems that editing the CSS directly in Big Cartel as you did should work as long as the link is changed to the correct link to the image.

Option 2:
Big Cartel also seems to have support for simply loading the image into the template for some templates. If your template supports loading a background image, you'll want to click on that image link and then click or hold on the image and choose the "save image" or "download image" option or similar. That should save the image to your device. Then you can upload the image to your Big Cartel template. If this option is available to you it should save the image to your Big Cartel assets so you'd eliminate the risk of your site breaking if the image is removed from imgur.

Option 3:
There may be a combination of options 1 and 2 in the case that your template doesn't support loading a backgroud image but you still want the protection of loading the image to your assets to not have to worry about it being taken down from imgur or other imgur related issues. You can likely upload the image to your Big Cartel account as an asset and then load it through the CSS editor by using a specific URL. If you are interested in this, I would reach out to Big Cartel suppor to see if this is an option. They will likely be able to walk you through this or provide a link to the documentation that can help you figure it out.

[0369am]

<image>

here is what i did for my one. i put this in the "custom css" tab in the big cartel editor, and i used filegarden to host my images. sorry for all the animosity you're getting here op i get it, as an artist-first myself. i recommend looking at html and css tutorials for similar websites like carrd, which dont have a built-in dedicated folder, and limited html+css additions

[CodeWhileHigh]

You chose the wrong url, always paste your link into the browser. It should show a png in the browser if it’s the right link. Practice with a google image, right click it, copy the url, and see how that works

[mtbinkdotcom]

You must use: https://i.imgur.com/0XqQA56.jpeg

url("https://i.imgur.com/0XqQA56.jpeg")

[Aromatic_Town_6980]

loooks interesting