[Solved] Placing an image at targeted place

[azizultex]

I am designing a HTML page where there is a part like the attached linked image. I faced problem placing the news-letter image as in the image in the link below. How can I achieve this goal?

Attached Image here

[Paulie_D]

There are a lot of ways to do this.

What is your current HTML/CSS?

Please show us in Codepen.

[azizultex]

Hello Paulie_D!

Thanks for your reply. Here are my HTML & CSS code. I am using bootstrap

            <div class="row secondform">
            <div class="col-md-offset-2 title">
                <h2>Free Penny Stock Newsletter</h2>
                <p>Proin iaculis purus consequat sem cure</p>
            </div>

            <div class="form">
                <input type="email" placeholder="Enter Email Address" /> <br/>
                <input type="submit" value="subscribe" />
            </div>
        </div>

CSS:

      .secondform {


background-color:#189CE7; text-align:center; margin-bottom:20px; padding:40px; }

.secondform .title { float:left; } .secondform .title h2 { background-color:#016BA7; color:#fff; font-size:40px; font-weight:bold; padding-top:10px; padding-bottom:10px; padding-left:15px; padding-right:35px; margin:0; border-radius:6px; font-family: "Slate Pro"; } .secondform .title p { color:#004E7E; font-size:20px; padding:10px 50px 0px 10px; float:right; }

[Paulie_D]

I’ve roughed out a demo based on what you have provided.

It’s not complete because I suspect I don’t have all the CSS but basically I’ve added a pseudo-element (assuming you are familiar with those) which will appear on top of the h2 and put a background-image on that.

http://codepen.io/anon/pen/vpdAq

Some of the CSS might need to change (adding vendor prefixes for one) and will depend on what level of browser support you are aiming at.

[azizultex]

Hello Paulie_D!

Thanks for your help. I was able to solve my problem using :after pseudo element. Here is the css that fixes my problem:

.secondform .title h2:after {
position:absolute;
content:””;
width: 133px; /* image width /
height: 137px; / image height /
background:url(images/news-icon.png);
/ adjust as required /
transform:translate(0%, -25%); / center it on the h2 /
-webkit-transform:translate(0%, -25%); / center it on the h2 /
-ms-transform:translate(0%, -25%); / center it on the h2 */
}

Thanks

[Author]

Posts