Search code examples
htmlcssjpeg

How to use a jpg as a background image in html

I'm trying to use a jpeg that I have saved into a file as a background to a html file using its file path as the url. I have the following but it doesn't work. Any thoughts?

<style>
    body {
        background-image:url('C:\Users\...\background.jpg');    
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center; 
    }

Solution

  • ok, So giving relative path is very easy, only you need to understand the basic folder structure of your project, although I am not sure how you are keeping your files and folder structure so I will tell the ideal folder structure for front-end project (according to me), and will explain to you how you can use a relative path for assets,

    let's keep the main HTML file in a folder named by your project, For example Peadar08 is the project name. so put an index.html file in your folder, and on the same level keep a folder for your assets, like this...

    enter image description here

    then in ASSETS folder create more folders for your respective assets(images, js, css etc), like this...

    enter image description here

    Now just see an example for images, and you can follow the same for other assets, So you can use images in 2 ways,

    1. As an IMAGE by img tag in your HTML, so keeping in mind the above stuture you can use images in your HTML like this.

      <img src="assets/images/example.png" alt="altText"/>

    So your image will render perfectly as assets and your HTML file is on the same level so just mention the path starting with the folder name.

    now see another example if you need to use your image as a background image by CSS

    so all you need to do is use of ../ to go one folder back, just because you are in css file and ../ this will take you one folder up, I.e in assets folder and then you can foloow the path. so in your CSS use this..

    .ExampleClass {
    background-image: url('../assets/images/example.png');
}

    to move 2 folder up just use ../../ and so on.

    Hope this will help you.