Haris Ahmed Haris Ahmed - 19 days ago 10
CSS Question

How to have text in center and image around it as shown in screenshot? (Image attached)

I am converting an Illustrator design into HTML and CSS using Bootstrap framework. I am stuck on the part of design shown below:

Illustrator Design

I want the text surrounded by image as shown above.I can have these images separately and also one single image as I can export these from Illustrator according to the requirements. I can also export SVG image if required.What would be the best approach to achieve this task.

Answer

Using CSS, you can both display the image as a background-image of a <div> and tailor the positioning of the heading and title within the same <div>.

Markup:

<div>
<h2>We Only Work With the Best</h2>
<p>We screen our coders&#39; social profiles like LinkedIn, GitHub and StackOverflow. After that, we only expose them to smaller tasks until they build up their reputation.</p>
</div>

Styles:

div {
text-align: center;
background-image: url('/work-with-the-best.png') no-repeat;
}

div h2 {
margin-top: 200px;
}
Comments