How to Add Background Image

Asked by KeerthiVasan about 5 months ago

0

How can I add zomato background image...I Tried in the usual way it didn't worked.....background: url('../images/BackGround.png');

3 Answers

    0

    Can you share your playground URL Keerthi?

    Usually it should be:

    .selector {
background: url('https://full-image-url.com/image.jpg')
}
    @mehulmpt

    Mehul Mohan

    @mehulmpt

      0

      https://codedamn.com/project/zomato-landing-page-clone/guided/step0/GIbVIndYUe6xNJfdoWLGc How can I add the background.png image that is in assets/images/background.png

      @keerthi18

      KeerthiVasan

      @keerthi18

        0

        Hey Keerthi, make sure that you've linked your css file with your index.html file.

            background-image: url(assets/images/BackGround.png);

        The above line should be able to set the background image of the HTML element.

        I'm share the code snippet that I've built to demonstrate this to you here along with a preview of it.

        HTML Code

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zomato Clone</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <section id="hero">
    <h1 id="title">Zomato</h1>
    <h3 id="tagline">Discover the best foods and Drinks in Chennai</h3>
    </section>
  </body>
</html>

        CSS

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    height: 100vh;
}

#hero {
    background-image: url(assets/images/BackGround.png);
    padding: 50px;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
}

#title, #tagline {
    color: white;
    font-family: 'Poppins';
}

#title { 
    font-style: italic;
    font-size: xx-large;
    font-weight: 900;
}

#tagline {
    font-weight: 400;
}

        Preview

        preview image

        @pranavtechie

        Pranav Mandava

        @pranavtechie

        • KeerthiVasan (keerthi18)

          Thank You so much Pranav!! Also I have an other doubt...How can I add that Location image before Chennai...If you could share the code it will help me a lot.

        0

        Thank You so much Pranav!! Also I have an other doubt...How can I add that Location image before Chennai...If you could share the code it will help me a lot.

        @keerthi18

        KeerthiVasan

        @keerthi18

        Your answer