Bootstrap let text appear on the responsive image

In this position toss for a while, half a day has no effect.

There are two ways: 1) Let the picture as the background, the text directly layout in the picture;

2) Let the image be inserted with the IMG tag, the text is relative layout on the picture;

First of all to talk about the first approach to the problem, to let the background picture fully displayed, it is mandatory to set the height of the outer container, so that the response is lost;

For example:

#content-SEC3 {
    position:relative;
    max-width:100%;
    Height:auto;
    Background:url ('.. /images/homepage/accssorybg.jpg ') no-repeat top center;
    background-size:100% Auto;
    Background-color:cadetblue;
    Text-align:center;
}

The height setting auto or a fixed value can not reach the effect, either the picture is not full, or the white edge is displayed;

Finally, the second way to achieve, but there are not perfect places, the text of the horizontal center into a problem, tossing a half-day with the script to solve, if there is a better way friends, hope advice.

The procedure is as follows:

HTML structure:

<div id= "CONTENT-SEC3" >
            
            <div id= "Content-sec3-adjust" style= "Position:absolute; top:0; left:50%;" >
                
 

CSS style:


#content-SEC3 {
    position:relative;
    max-width:100%;
    Height:auto;    
    background-size:100% Auto;   
    Text-align:center;
}

    #content-sec3. title {
        margin-top:5px;
        font-family: Microsoft ya black;
        font-size:20px;
        Color: #333333;
    }

    #content-sec3. title-sub-line {
        margin-top:15px;
        margin-bottom:18px;
        font-family: Microsoft ya black;
        font-size:12px;
        Color: #CCCCCC;
        Text-align:center;
    }

    #content-sec3. title-more {
        margin-bottom:10px;
        font-family: Microsoft ya black;
        font-size:12px;
        Color: #2E84E9;
        Text-align:center;
        Cursor:pointer;
    }
Horizontal Center Script:


var init = function () {
            var _bg3width = $ ("#content-sec3-adjust"). width ();
            $ ("#content-sec3-adjust"). CSS ("Margin-left", _bg3width * -1/2 + "px");
        };
 

Recall the script above when window windowing changes size.

$ (window). Resize (function () {
Init ();
});