Okay, can someone show me how to make this a background

HTML-CSS
#1

I am trying to make this image from this free website the background of my codepen. Can someone show me what the css would look like. I know how to do the

{background-image: ( );

part, I just dont know how to put the url in and stuff. Or maybe i’m just wrong all around.

44%20AM
44%20AM1152×526 84.8 KB

#2

Now that you have posted it here it has an URL

{
	height: 100vh;
	width: 100vw;
	background-image: url(https:/uploads/default/optimized/3X/9/d/9d69839b5dbb7cb8254a34440cee8d23d9d71a3c_1_690x315.png);
	background-size: cover;
	background-repeat: no-repeat;
}

codepen

#3

How would I make just that picture cover the whole background? It lets you download the image, I don’t know how to set a background from an image in my files.

#4

oops
its
background-size:cover;

only problem is that the image on the post is pretty low res.
if you have a higher resolution file you can put it up on an image hosting service (google it there are lots of these)
once it resides somewhere on the web you can put that link address in your codepen.

#5

okay thank you, but is there not a way to upload images from your files to the code?

#6

Only with a premium account. Its a bummer I know.

#7

It gave google photos as a recommended option, could I copy the link from the picture in my google photos and it work?

#8

Also, should I insert images through css or html, or does it really matter?

#9

yes google photos works, just tested it. As to your second question that depends on what your intended use is.

In CSS the image becomes the background decoration of a division. This division can contain other elements.
In HTML the image is the element in itself. There are reasons for both.

#10

okay, could you send a link of your test so I can see how you positioned the code you used to do it?

#11

You might also be able to find an SVG pattern that is pretty close (or at least something cool you like). I didn’t really do a search.

#12

I have never heard of theses, thank you @lasjorg

#13

codepen for using google photos link as a background

#14

I found the image you are asking about online. It is a tillable background so you do not want to use the background-size or background-repeat properties. just set the image background and that is it.

the codepen link provided will take you to what I think you want to achieve.

#15

I might add that it would be best to apply this property to your <body> element

#16