Problem with background

Tell us what’s happening:

how to give background an image to the web page using css or html

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

Like this:

body{
  background-image:url("link or path of the image you want to add");
}

Here’s another example:

body { 
  background: url("https://via.placeholder.com/1024") ;
}

or if it was an image file on your own server

body { 
  background: url(../img/bg.jpg) ;
}

1 Like

To go deeper!

body {
  background:url('your_image_url');
}

Will give:


If the image you use is small.

It will be better if you use some others CSS background properties:
background-position (more info >)
background-repeat (more info >)
background-position (more info >)
background-attachment (more info >)
and many more!

Here an example of a full size image background, centered and fixed:
https://codepen.io/mangasource/pen/MzQyLr

Or you can use a little image (textures or subtle patterns) and repeat it, like this:
https://codepen.io/mangasource/pen/mQXPNJ

You can do many things with CSS!
Have a good day!

1 Like