Skip to content
← Back to Community
How do i put an image as a backround in html
Profile icon
cmglj

how do i put an image as the backround in html? @Coder100 by any chance can you tell me if you know? or anyone.

Voters
Profile icon
Jayzss
Profile icon
momRyan
Profile icon
cmglj
Comments
hotnewtop
Profile icon
Whacko

You need to use CSS.

<div class="background"> <!-- Stuff on top of the background goes here. --> </div> <style> .background { background-image: url('theImage.jpg'); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } body, html { height: 100%; } </style>

And then INSIDE the div you add what you want.

It should work.

Profile icon
Coder100

@JavaMaster1 why would you add that under the div

Profile icon
Whacko

@Coder100 Oh, wait.

You need to add it inside the div.

Profile icon
Whacko

@Coder100 I updated my post

Profile icon
Coder100

noooo wtf @JavaMaster1

Profile icon
Whacko

@Coder100 Whats so bad?

Profile icon
Coder100

So to do this, in your style.css add:

body { background: url(img.png); }

But make sure img.png is an actual image (replace img.png with the image of your choice).

Also, to make sure the image is full-size, read this:

html { background: url(img.png) no-repeat center center fixed; background-size: cover; }

Read more about backgrounds here and here

Profile icon
cmglj

@Coder100 how do I put my own pic? bc I tried changing img.png to a link and it didn't work

Profile icon
Coder100

@cmglj just a sec

Profile icon
Coder100

oh, that's because those aren't valid images @cmglj

Profile icon
k9chelsea2