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");
}
tdreid
November 21, 2018, 2:43pm
3
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