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
  5. gregsta

    sagar.chavada

    Joined:
    Jul 12, 2019
    Messages:
    3
    Likes Received:
    0
    Location:
    Ahmedabad.
    My popint of you you have toi try this one for HTML :

    HTML Code:
    <html>
    <body background="bgimage.jpg">
    <h1>Hello world!</h1>
    <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
    </body>
    </html>

    CSS Code :
    body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
    background-attachment: scroll;
    }
     
    sagar.chavada, Jul 26, 2019
    #5
  6. gregsta

    shaili shah

    Joined:
    Jul 15, 2019
    Messages:
    12
    Likes Received:
    0
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    }

    .hero-image {
    background-image: url("/w3images/photographer.jpg");
    background-color: #cccccc;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    }

    .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    }
    </style>
    </head>
    <body>

    <div class="hero-image">
    <div class="hero-text">
    <h1 style="font-size:30px">Text over background image</h1>
    </div>
    </div>

    </body>
    </html>
     
    shaili shah, Sep 19, 2019
    #6
    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.