Styling text on image









up vote
0
down vote

favorite












I have an image and text on it in two different divs with a background color,
text in one div is long and in the second div is short but the width of both divs are equal that is I don't want.
Here is my code:






.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>





All I need is like in the picture attached desired output:



desired output.



I tried many tricks but not understand how to do this.






html css







share|improve this question























  • .lower-text display:inline-block;
    – Stender
    2 days ago










  • oh man thanks buddy. it worked for me!
    – Just Code
    2 days ago










  • No problem - might as well close this question since it is doubtful that it will be helpfull for future users ;)
    – Stender
    2 days ago















up vote
0
down vote

favorite












I have an image and text on it in two different divs with a background color,
text in one div is long and in the second div is short but the width of both divs are equal that is I don't want.
Here is my code:






.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>





All I need is like in the picture attached desired output:



desired output.



I tried many tricks but not understand how to do this.






html css







share|improve this question























  • .lower-text display:inline-block;
    – Stender
    2 days ago










  • oh man thanks buddy. it worked for me!
    – Just Code
    2 days ago










  • No problem - might as well close this question since it is doubtful that it will be helpfull for future users ;)
    – Stender
    2 days ago













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I have an image and text on it in two different divs with a background color,
text in one div is long and in the second div is short but the width of both divs are equal that is I don't want.
Here is my code:






.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>





All I need is like in the picture attached desired output:



desired output.



I tried many tricks but not understand how to do this.






html css







share|improve this question















I have an image and text on it in two different divs with a background color,
text in one div is long and in the second div is short but the width of both divs are equal that is I don't want.
Here is my code:






.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>





All I need is like in the picture attached desired output:



desired output.



I tried many tricks but not understand how to do this.






.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>





.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>





html css




html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 2 days ago









Suraj Rao

22k75467




22k75467










asked 2 days ago









Just Code

92




92











  • .lower-text display:inline-block;
    – Stender
    2 days ago










  • oh man thanks buddy. it worked for me!
    – Just Code
    2 days ago










  • No problem - might as well close this question since it is doubtful that it will be helpfull for future users ;)
    – Stender
    2 days ago

















  • .lower-text display:inline-block;
    – Stender
    2 days ago










  • oh man thanks buddy. it worked for me!
    – Just Code
    2 days ago










  • No problem - might as well close this question since it is doubtful that it will be helpfull for future users ;)
    – Stender
    2 days ago
















.lower-text display:inline-block;
– Stender
2 days ago




.lower-text display:inline-block;
– Stender
2 days ago












oh man thanks buddy. it worked for me!
– Just Code
2 days ago




oh man thanks buddy. it worked for me!
– Just Code
2 days ago












No problem - might as well close this question since it is doubtful that it will be helpfull for future users ;)
– Stender
2 days ago





No problem - might as well close this question since it is doubtful that it will be helpfull for future users ;)
– Stender
2 days ago













1 Answer
1






active

oldest

votes

















up vote
0
down vote



accepted










Make the display of the second div inline-block so it doesn't span 100% width.
Heres an example:






.banner
 position: relative;

.banner img
 width: 100%;

.image-text
 position: absolute;
 top: 40%;
 left: 8%;

.image-text h2
 font-size: 22px;
 font-weight: bolder;
 color: #fff;
 margin: 0px;

.upper-text
 background: #2b96c3;
 padding: 5px 10px;

.lower-text
 background: #0d729c;
 padding: 5px 10px;
 display: inline-block;

<section>
 <div class="banner">
 <img src="https://i.imgur.com/xTeFbiv.jpg">
 <div class="image-text">
 <div class="upper-text">
 <h2>Excellent Successfull</h2>
 </div>
 <div class="lower-text">
 <h2>Sustainable</h2>
 </div>
 </div>
 </div>
</section>








share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225230%2fstyling-text-on-image%23new-answer', 'question_page');

    );

    Post as a guest

















    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote



    accepted










    Make the display of the second div inline-block so it doesn't span 100% width.
    Heres an example:






    .banner
     position: relative;

    .banner img
     width: 100%;

    .image-text
     position: absolute;
     top: 40%;
     left: 8%;

    .image-text h2
     font-size: 22px;
     font-weight: bolder;
     color: #fff;
     margin: 0px;

    .upper-text
     background: #2b96c3;
     padding: 5px 10px;

    .lower-text
     background: #0d729c;
     padding: 5px 10px;
     display: inline-block;

    <section>
     <div class="banner">
     <img src="https://i.imgur.com/xTeFbiv.jpg">
     <div class="image-text">
     <div class="upper-text">
     <h2>Excellent Successfull</h2>
     </div>
     <div class="lower-text">
     <h2>Sustainable</h2>
     </div>
     </div>
     </div>
    </section>








    share|improve this answer
























      up vote
      0
      down vote



      accepted










      Make the display of the second div inline-block so it doesn't span 100% width.
      Heres an example:






      .banner
       position: relative;

      .banner img
       width: 100%;

      .image-text
       position: absolute;
       top: 40%;
       left: 8%;

      .image-text h2
       font-size: 22px;
       font-weight: bolder;
       color: #fff;
       margin: 0px;

      .upper-text
       background: #2b96c3;
       padding: 5px 10px;

      .lower-text
       background: #0d729c;
       padding: 5px 10px;
       display: inline-block;

      <section>
       <div class="banner">
       <img src="https://i.imgur.com/xTeFbiv.jpg">
       <div class="image-text">
       <div class="upper-text">
       <h2>Excellent Successfull</h2>
       </div>
       <div class="lower-text">
       <h2>Sustainable</h2>
       </div>
       </div>
       </div>
      </section>








      share|improve this answer






















        up vote
        0
        down vote



        accepted







        up vote
        0
        down vote



        accepted






        Make the display of the second div inline-block so it doesn't span 100% width.
        Heres an example:






        .banner
         position: relative;

        .banner img
         width: 100%;

        .image-text
         position: absolute;
         top: 40%;
         left: 8%;

        .image-text h2
         font-size: 22px;
         font-weight: bolder;
         color: #fff;
         margin: 0px;

        .upper-text
         background: #2b96c3;
         padding: 5px 10px;

        .lower-text
         background: #0d729c;
         padding: 5px 10px;
         display: inline-block;

        <section>
         <div class="banner">
         <img src="https://i.imgur.com/xTeFbiv.jpg">
         <div class="image-text">
         <div class="upper-text">
         <h2>Excellent Successfull</h2>
         </div>
         <div class="lower-text">
         <h2>Sustainable</h2>
         </div>
         </div>
         </div>
        </section>








        share|improve this answer












        Make the display of the second div inline-block so it doesn't span 100% width.
        Heres an example:






        .banner
         position: relative;

        .banner img
         width: 100%;

        .image-text
         position: absolute;
         top: 40%;
         left: 8%;

        .image-text h2
         font-size: 22px;
         font-weight: bolder;
         color: #fff;
         margin: 0px;

        .upper-text
         background: #2b96c3;
         padding: 5px 10px;

        .lower-text
         background: #0d729c;
         padding: 5px 10px;
         display: inline-block;

        <section>
         <div class="banner">
         <img src="https://i.imgur.com/xTeFbiv.jpg">
         <div class="image-text">
         <div class="upper-text">
         <h2>Excellent Successfull</h2>
         </div>
         <div class="lower-text">
         <h2>Sustainable</h2>
         </div>
         </div>
         </div>
        </section>








        .banner
         position: relative;

        .banner img
         width: 100%;

        .image-text
         position: absolute;
         top: 40%;
         left: 8%;

        .image-text h2
         font-size: 22px;
         font-weight: bolder;
         color: #fff;
         margin: 0px;

        .upper-text
         background: #2b96c3;
         padding: 5px 10px;

        .lower-text
         background: #0d729c;
         padding: 5px 10px;
         display: inline-block;

        <section>
         <div class="banner">
         <img src="https://i.imgur.com/xTeFbiv.jpg">
         <div class="image-text">
         <div class="upper-text">
         <h2>Excellent Successfull</h2>
         </div>
         <div class="lower-text">
         <h2>Sustainable</h2>
         </div>
         </div>
         </div>
        </section>





        .banner
         position: relative;

        .banner img
         width: 100%;

        .image-text
         position: absolute;
         top: 40%;
         left: 8%;

        .image-text h2
         font-size: 22px;
         font-weight: bolder;
         color: #fff;
         margin: 0px;

        .upper-text
         background: #2b96c3;
         padding: 5px 10px;

        .lower-text
         background: #0d729c;
         padding: 5px 10px;
         display: inline-block;

        <section>
         <div class="banner">
         <img src="https://i.imgur.com/xTeFbiv.jpg">
         <div class="image-text">
         <div class="upper-text">
         <h2>Excellent Successfull</h2>
         </div>
         <div class="lower-text">
         <h2>Sustainable</h2>
         </div>
         </div>
         </div>
        </section>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 2 days ago









        Alex Gray

        35627




        35627



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225230%2fstyling-text-on-image%23new-answer', 'question_page');

            );

            Post as a guest

































































            -

            Popular posts from this blog

            Kleinkühnau

            Image
            Kleinkühnau Stadt Dessau-Roßlau 51.839444444444 12.184444444444 57 Koordinaten: 51° 50′ 22″  N , 12° 11′ 4″  O Höhe: 57 m Fläche: 9,93 km² Einwohner: 1649  (31. Dez. 2011) Bevölkerungsdichte: 166 Einwohner/km² Eingemeindung: 1. Oktober 1923 Eingemeindet nach: Dessau Postleitzahl: 06846 Vorwahl: 0340 Rathaus (Amtshaus Kühnau e. V.) Ev. Kirche Kleinkühnau Kleinkühnau ist ein Stadtteil von Dessau-Roßlau, einer kreisfreien Stadt im Bundesland Sachsen-Anhalt. Er liegt ungefähr vier Kilometer westlich des Stadtzentrums. Südlich der Kühnauer Straße befinden sich der Flugplatz Dessau, das Technikmuseum Hugo Junkers sowie der Standort der Polizeidirektion Sachsen-Anhalt Ost. Kleinkühnau hat 1649 Einwohner (Stand 31. Dezember 2011). Inhaltsverzeichnis 1 Geschichte 1.1 Bevölkerungsentwicklung 2 Siehe auch 3 Weblinks 4 E...
            Read more

            Makov (Slowakei)

            Image
            Makov Wappen Karte Makov Basisdaten Staat: Slowakei Kraj: Žilinský kraj Okres: Čadca Region: Kysuce Fläche: 46,052 km² Einwohner: 1.720 (31. Dez. 2017) Bevölkerungsdichte: 37 Einwohner je km² Höhe: 583  m n.m. Postleitzahl: 023 56 Telefonvorwahl: 0 41 Geographische Lage: 49° 22′  N , 18° 29′  O 49.366666666667 18.483333333333 583 Koordinaten: 49° 22′ 0″  N , 18° 29′ 0″  O Kfz-Kennzeichen: CA Kód obce: 509299 Struktur Gemeindeart: Gemeinde Verwaltung (Stand: November 2014) Bürgermeister: Martin Pavlík Adresse: Obecný úrad Makov 60 02356 Makov Webpräsenz: www.makov.sk Statistikinformation auf statistics.sk Makov (ungarisch Trencsénmakó – älter auch Makó , polnisch Maków ) ist eine Gemeinde in der Nordwestslowakei. Inhaltsverzeichnis 1 Geographie 1.1 Bevölkerung 2 Ge...
            Read more

            Deutsches Schauspielhaus

            Image
            Deutsches Schauspielhaus Hamburg Aktie über 1000 Mark der Deutsche Schauspielhaus AG vom 20. Juni 1899 Das Deutsche Schauspielhaus im Hamburger Stadtteil St. Georg ist mit 1200 Plätzen das größte Sprechtheater Deutschlands. Entstanden ist es durch eine private Initiative von Bürgern und der 1899 gegründeten „Aktiengesellschaft Deutsches Schauspielhaus“. Die Pläne stammen von dem Wiener Architekturbüro Fellner und Helmer, die das neobarocke Gebäude nach dem Vorbild des Wiener Volkstheaters gestalteten. Am 15. September 1900 wurde das Theater mit einer Aufführung der Iphigenie auf Tauris feierlich eröffnet. Der Name Deutsches Schauspielhaus knüpft an die Tradition des Hamburger Nationaltheaters an, das Mitte des 18. Jahrhunderts durch Hamburger Bürger betrieben wurde und an dem Gotthold Ephraim Lessing als Dramaturg tätig war. Das Schauspielhaus hat die Theatergeschichte der Stadt im 20. Jahrhundert entsc...
            Read more