How to add a background picture to the top of the page

Source: Internet
Author: User
Navy topic How to add a picture at the top of a page you can add a background picture http://www.ikk.me/such a child

His code is "click to view"

Reply content:

Navy topic How to add a picture at the top of a page you can add a background picture http://www.ikk.me/such a child

His code is "click to view"

Look at the code, is to section add a background , in order to make a fixed-width picture fill the screen of each resolution, set it to cover :

HTML section:


  
   
    
   ...
  
   

CSS section:

.billboard {    background: url('../img/mirai.jpg') center center repeat-x;    background-size: cover;}

I don't know much about the site's build process. But it's easy to find the source of the image.

First, the picture is loaded with the premise that the image is requested. So look at the requested picture, the first one is the picture, the name is mirai.jpg.

Then, the code to import the picture into the page may appear in three places, HTML, JS and CSS, HTML and JS after searching can not search Mirai. Then all the CSS to troubleshoot, found that costoms.css contains such a paragraph:

.billboard {    background: url('../img/mirai.jpg') center center repeat-x;    background-size: cover;}

Then execute $ ('. Billboard ') in the console to select an object, and the section where the site title is located. In other words, simply set the background of the site title to the image by using CSS.
By the way, the picture is much larger than the title of the page, so the author has set a large padding to ensure that the picture is fully displayed without being cropped or compressed.

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.