Utilizing CSS to Implement a Background Image

Here is where I am looking to upload the image. Ideally, I would like to position my image to the left side of the text related to Food and Travel. You can view the image here.

.block-title h3 {
  color: #151515;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.9px;
  margin-bottom: 24px;
  margin-top: 50px;
  padding-bottom: 13px;
  position: relative;
  text-align: center;
}
<div class="col-lg-12">
  <p>
    <center><img src="#">
      <div class="block-title">
        <h3>Food & Travel</h3>
      </div>
    </center>
  </p>
</div>

htmlcss

Answer №1

To implement this style, simply insert the following CSS code:

div.block-title { display: inline-block; }
<div class="col-lg-12">
  <p>
    <center><img src="#">
      <div class="block-title">
        <h3>Food & Travel</h3>
      </div>
    </center>
  </p>
</div>

Answer №2

If you want to improve your HTML code, consider making the following changes:

<div class="col-lg-12">
    <div class="block-title">
        <img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
        <h3 class="title">Food & Travel</h3>
    </div>
</div>

Here are some tips for optimizing your HTML:

  • Avoid using styling elements like center directly in HTML. Instead, use CSS for styling purposes.
  • Instead of giving styles directly to specific tags (e.g., H3), assign classes to individual elements for better organization and control over styling.

Consider using Flexbox instead of float for layout design. Flexbox offers more flexibility and precision in positioning elements within a container.

To implement Flexbox, add the following CSS to your container:

.block-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

You can also try using display: inline on the H3 element to keep it on the same line as other elements. Adjust the vertical-align property to fine-tune the alignment with the image.

.title {
    display: inline;
(..)
}

.image {
  vertical-align: -25px; //adjust as needed
}

Check out these examples for reference: Flexbox Example | Inline Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unleashed placement and drifting

Is it possible to style this layout without specifying an exact height for "Element 1"? Code Element1 { positon: relative; width: 100%; height: auto; /* Avoiding specific height */ } Inner1 { position: absolute; top: xyz px; left: xyz px; } Inner2 { po ...

css

Hide the footer DIV in CSS by making it disappear with a height of 100%

I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days ...

csslayoutheight

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

The jQuery bookmarklet in the djangobyexample book is completely unresponsive

As I work my way through Django By Example, I came across a chapter where a jQuery bookmarklet is created within a Django app. This allows users to easily save jpg images from websites into their user profile area within the Django app. Although the tutor ...

javascriptjquerypythonhtmldjango

Make sure to keep "display:inline-block" in place while using fadeTo()

As a design student, I am working on creating a family tree website where users can click on individual circles (ancestors) to view their lineage. Everything has been functioning smoothly so far, except for when attempting to display the lineage of specifi ...

jqueryhtmlcssdisplay

Recording Node pathways that begin with the hash symbol #

How can I configure my Node/Express routing to intercept a route like /#/about and send it to /about Is there a way for node to handle routes that start with "/#"? It appears to only cut off at the hash mark. ...

htmlexpresshashroutes

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...

htmlcssalignmentcss-floatmargin

How can you add padding to an HTML page using CSS?

I've been attempting to use padding-bottom:90px; in order to shift Tweets by ‎@StackOverflow (the entire tweets section) downwards on the page. I want to move it further down using the above padding, but it doesn't seem to be working for me. H ...

htmlcssasp.net

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards and ...

htmlcssinternet-explorer

Adding options to an HTML select dropdown menu using data stored in an array

Having reviewed several questions related to this issue, I am still encountering difficulties. Below is the code snippet that I am struggling with: <body> <?php //To begin, there is a form with a drop-down menu and a button, which will trigge ...

phphtmlforms

The Bootstrap-Select dropdown refuses to open

I've been attempting to create a menu using data-subtext, and while I have come across some suggestions on stackoverflow, I'm still having trouble getting the menu to function properly. The issue I'm facing is that the menu doesn't seem ...

htmljquerycssbootstrap-selectbootstrap-selectpicker

Achieving full coverage of cell content within a cell area by utilizing align-items in CSS Grid

Is it possible to achieve two conflicting goals using CSS Grid? In my design, I want the content in each cell to be vertically centered using align-items: center; At the same time, I need the entire area of the cell to be filled with color. However, ...

htmlcsscss-grid

Create an HTML button on the homepage that directs users to the "about" page

I've been struggling to make a button in my Ionic app navigate to a different page upon clicking. Despite being new to Ionic, I've spent hours trying to solve this issue. Below is the HTML code in home.page.html: <ion-header> &l ...

htmltypescriptfunctionionic-framework

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

I've set up a node express app and incorporated sass support for the CSS. However, when I attempt to access http://myhost.com:port/css/whatever.css, the whatever.css file is generated in the express_app_root/public/css directory as expected. The *.scs ...

cssnode.jsweb-applicationsexpresssass

What is the best way to update just the image path in the source using jQuery?

I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...

javascripthtmljquerycss

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

Replace old content with new content by removing or hiding the outdated information

I need to update the displayed content when a new link is clicked index html file <a href="" class="content-board" > <a href="" class="content-listing" > content html file <div class="content-board"> <div class="content-lis ...

javascriptjqueryhtml

Incorporating Google's Invisible Recaptcha with Jquery Ajax and PHP

I am struggling to make my form, which includes Google invisible reCAPTCHA, work seamlessly with my jQuery AJAX and PHP. It appears that the token is not being properly sent to my PHP page via AJAX, resulting in the following error message from my PHP scri ...

phpjqueryhtmlajaxrecaptcha

Managing a new browser window using Selenium

I am attempting to automate a download process on a webpage using selenium. Upon clicking a button, a blank popup window appears. After approximately 60 seconds, a link appears within the popup that I want to click on. The code snippet below outlines my ap ...

c#htmlselenium