Hello
Slightly off topic from FCC projects but I want to put an image as a background in my webpage, I’ve looked it up on W3 schools but get confused with CSS and HTML
I’ve tried it but no luck
Any advice please. I bet it’s something really simple too!
This link at W3Schools shows you how to add a background image to the body, but can be used other elements as well.
how to add a background image- W3Schools
1 Like
Hey Clara.
Sorry to dissapoint you, but I found it actually wasn’t that simple. I had a bit of grief with my background image in the survey form. So I ended up doing what everybody advises against (and rightly so!). I used some code I didn’t quite understand. It worked, and in the meantime I figured out more about it. But I’m still not 100% on it.
Have a look here if you like: https://codepen.io/ddggxh/pen/ExvYagZ?editors=1100
It might help even it’s confusing.
And just for the record: don’t copy code you don’t understand. However, you can look at what works and then try and figure it out 
1 Like
I forked your codepen and put the background-image on the body tag. Have a look at the code. You don’t need to use a special class or the ::before tag. I commented out the class you used so you can see it works. It takes awhile to figure out the code you need, so don’t let it worry you too much.
Hope this helps.
https://codepen.io/devgaragedt/pen/jOLJJOL
It would help if I posted the link. LOL.
2 Likes
Lol thank you 
You’d think for something so simple it would be straightforward
So basically you have to assign it to a div container tag?
No, you just need to apply it to the body tag.
use:
background-image: url(link to your image);
There are also:
background-repeat
background-position
background-size
to get the image the way you want it to display.
Great. Thank you David. It makes much more sense to me now. I can’t remember where I got the example for my code from. But thinking about it now, the ::before tag doesn’t make a lot of sense. Don’t know how it ended up so complicated.
Your welcome.
Glad I could help.
If you want to learn more check out Kevin Powell, he is a CSS guru.
Kevin Powell - Youtube
Kevin’s free Scrimba HTML and CSS Crash Course
Kevin’s free Conquering Responsive Layouts course
1 Like