Change to background image.

Discussion in 'HTML and CSS' started by gregsta, Dec 18, 2018.

  1. gregsta

    gregsta

    Joined:
    Oct 30, 2018
    Messages:
    8
    Likes Received:
    0
    <td rowspan="4">
    <img src="images/Equalizer_34.png" width="61" height="282" alt=""></td>
    <td colspan="11"><img src="images/Equalizer_35.png" width="439" height="181" alt=""></td>
    <td rowspan="4">
    <img src="images/Equalizer_36.png" width="64" height="282" alt=""></td>
    <td>
    Untitled-1.png

    How do I make this into a background image? its this image I want to turn into the back ground image Equalizer_35.png
     
    gregsta, Dec 18, 2018
    #1
    1. Advertisements

  2. gregsta

    Exodus_AU

    Joined:
    May 8, 2016
    Messages:
    4
    Likes Received:
    0
    firstly, remove the table! tables are not for layout design.

    Do you want the image to be full screen to the viewport?
    Add a css class
    Code (Text):

    header {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        background: url(./images/Equalizer_35.png) no-repeat center center scroll; /* This is the location of your image */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
     
    And add to your css the header tag
    Code (Text):

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./content/site.css"> <!-- link to your stylesheet -->
       
        <title>Hello World</title>
    </head>
    <body>
        <header></header>
    </body>
    </html>
     
     
    Last edited: Dec 18, 2018
    Exodus_AU, Dec 18, 2018
    #2
    1. Advertisements

  3. gregsta

    gregsta

    Joined:
    Oct 30, 2018
    Messages:
    8
    Likes Received:
    0
    Thanks for your help I did manged to do it, my website looks good in chrome, not so good in IE I will try your way as well ,as my way is a bit bodged.
     
    gregsta, Dec 18, 2018
    #3
  4. gregsta

    gregsta

    Joined:
    Oct 30, 2018
    Messages:
    8
    Likes Received:
    0
    I don,t have dreamweaver open at the moment but I could show you the code I know it's not right, but I got it to work.
    Am on my tablet so maybe in morning I will jump on desktop and open it up
     
    gregsta, Dec 18, 2018
    #4
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.