locked
Where to position background image? RRS feed

  • Question

  • User-1793215261 posted

    Hello

    I have a Web page with 5 sliding images and would like to place a full-screen background image behin that sliding image using something like the following CSS which I have gleaned from online tutorials:

    #banner {
    background-image: url("images/background.jpg");
    background-;
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 0;
    min-height: 100vh;
    height: 100vh !important;
    ;
    text-align: center;
    overflow: hidden;
    }

    The HTML I am using is:

    <div class="container">
    <div class="freshdesignweb-top">
    <div class="clr"></div>
    
    </div>
    
    <div class="slider_container">
    <div class="flexslider">
    <ul class="slides">
    <li>
    
    <img src="images/slider/slide1.jpg" alt="" Holiday title="" /></a>
    <div class="flex-caption">
    <div class="caption_title_line">
    <h2>Holiday</h2>
    
    </div>
    </div>
    </li>
    
    The above code is repeated 5 times - one for each sliding image, until
    
    </ul>
    </div>
    </div></div></body>

    and the CSS:

    html,body {
    	margin:0;
    	padding:0;
    	height: 100%;
    }
    .container{
    	width: 100%;
    	height: 100%;
    	;
    }


    In my HTML, where would I place my background.jpg image, please?

    Thanks!

    Wednesday, February 6, 2019 8:13 PM

Answers

  • User-893317190 posted

    Hi Bluenose,

    According to your css, you add a background image to the element with the id banner.

    Since you want a fullscreen background image, you could add the id to the body element or the first child element of body.

    Such as

    <head runat="server">
        <title></title>
        <style>
            #banner {
    background-image: url("/images/WingtipToys/boatbig.png");
    background-;
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 0;
    min-height: 100vh;
    height: 100vh !important;
    ;
    text-align: center;
    overflow: hidden;
    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
         <div  id="banner">
         
         </div>
        </form>
    </body>
    </html>
    

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 7, 2019 5:13 AM

All replies

  • User-893317190 posted

    Hi Bluenose,

    According to your css, you add a background image to the element with the id banner.

    Since you want a fullscreen background image, you could add the id to the body element or the first child element of body.

    Such as

    <head runat="server">
        <title></title>
        <style>
            #banner {
    background-image: url("/images/WingtipToys/boatbig.png");
    background-;
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 0;
    min-height: 100vh;
    height: 100vh !important;
    ;
    text-align: center;
    overflow: hidden;
    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
         <div  id="banner">
         
         </div>
        </form>
    </body>
    </html>
    

    The result.

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 7, 2019 5:13 AM
  • User-1793215261 posted

    That works well, Ackerly Xu, thank you!

    Thursday, February 7, 2019 7:10 AM