Using a background image in a flexbox container with CSS

I'm struggling to add a background image to text. I have a feeling that the issue might be related to nesting too many classes within the "div" tag, but I can't seem to solve it.

CSS:

.box {
  display: flex;
  top: 80px;
  position: relative;
  padding-top: 30px;
  border: thin solid black;
}

.box1 {
  padding-left: 300px;
  padding-right: 30px;
  width: 630px;
  flex-direction: column;
  align-self: flex-start;
}

.smalltitle2 {
  border-bottom: medium solid black;
  background-image: url("https://newbackgroundimage.com");
  background-repeat: no-repeat;
}

HTML:

<div class="box">
  <div class="box1">
    <div class="smalltitle2">New Text with Background Image</div>
  </div>
</div>
htmlcssflexbox

Answer №1

To customize the appearance of your smalltitle2 container, consider adding specific width and height dimensions. You have the flexibility to decide whether you want the container to incorporate part of an image or display the entire image within it using the background-size property.

.box {
  display: flex;
  top: 80px;
  position: relative;
  padding-top: 30px;
  border-top: thin solid black;
  border-bottom: thin solid black;
  border-right: thin solid black;
  border-left: thin solid black;
}

.box1 {
  padding-left: 300px;
  padding-right: 30px;
  width: 630px;
  flex-direction: column;
  align-self: flex-start;
}

.smalltitle2 {
  border-bottom: medium solid black;
  background:url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png);
  background-repeat: no-repeat;
  background-size: contain;
  width:100%;
  height:120px; /* Adjusted height value */
}
<div class="box">
  <div class="box1">
    <div class="smalltitle2">Interesting Headline Here Could Go In This Area!</div>   
  </div>
</div>

Answer №2

To adjust the size of your background image, consider using either background-size: contain; or background-size: cover;.

The issue lies in the lack of a rule defining the dimensions of your background image within the CSS.

For a demonstration, check out this link: https://jsfiddle.net/v8eLsef4/1/

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

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click

Basic Chinese HTML Markup

As a college student, I find myself in the unique situation of taking two seemingly unrelated classes that have unexpectedly merged together - programming and Chinese language. In my C++ class, while learning to code in HTML, I took the opportunity to crea ...

htmlc++csschinese-locale

How to toggle hidden links with AngularJS or vanilla JavaScript with a click事件

When the "Show all" button is clicked, I would like to display all elements. If the "1st half" link is clicked, I want to show "abc", "def", and "ghi". When the 2nd link "2nd half" is clicked, I want to display "jkl", "mno", and "pqr". Then, when the "show ...

javascriptjqueryhtmlangularjs

creating hidden and displayed forms using php

I am in need of a hidden form that only becomes visible after the user clicks a button. Once the submit button is pressed, the form should return to its invisible state. Does anyone have any suggestions on how to achieve this functionality? I believe it m ...

phphtmlformsvisibleinvisible

PHP is unable to match a CAPTCHA code with the string entered by the user

I've developed a login system along with a CAPTCHA string that randomly generates characters in the form A1B2C3, containing uppercase and lowercase letters. Below is the code snippet: $cArr1 = array_merge(range("a", "z"), range("A", "Z")); $cArr2 = r ...

phphtmlstringcaptcha

Why is the jQuery class not responding to the is(:visible) selector?

Having trouble with this issue, I created a fiddle to demonstrate what I'm trying to achieve: http://jsfiddle.net/x2btM/9/ Below is the code snippet: <div id="ZodOneDragBox"> <div id="aquariusSelectedComp1" class="killSelectedComp1" sty ...

javascriptjqueryhtml

Issue with displaying the glyphicon-chevron on the carousel control

Currently, I'm in the process of incorporating a straightforward modal into my gallery design. I have a slide carousel positioned at the top of the page, while at the bottom, there are thumbnails of the gallery. While the slide carousel control butto ...

javascriptjqueryhtmlcsstwitter-bootstrap

Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few p ...

javascriptjquerycssanimationsvg

Developing a side panel for navigation

My goal is to create a sidebar that shifts to the right from the left side and makes space on the page when the hamburger menu is pressed. I have made progress in achieving this, but I am encountering difficulties with the animation. const btnToggleSide ...

javascripthtmlcss

Using an overlay with figure-img in Bootstrap 4 is a visually appealing design

I need assistance with adding an overlay to only the bootstrap 4 figure-img. In order to achieve this, I inserted a div with the class overlay beneath the figure-img. Below is the code snippet: <div class="col-md-4"> <figure class="service tex ...

htmltwitter-bootstrapcssbootstrap-4

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

A minimalist web page appearing as blank in Internet Explorer

After testing my simple web page in various browsers, I discovered that it only showed a blank white page in Internet Explorer. I combed through my CSS code and identified background = rgba(some stuff) as the unsupported line by IE. However, this particula ...

htmlcssinternet-explorer

Problem with traversing from parent to children elements using jQuery selectors

<form data-v-c4600f50="" novalidate="novalidate" class="v-form"> <div data-v-c4600f50="" class="pr-2" question="Top Secret4"> <div data-v-c4600f50="" f ...

javascripthtmljquerycss

Animating the movement of a div

How can I move the div "#menu" to the side when it's clicked on? I've tried the following code: <script> $("#menu").click(function(){ $("this").animate({ marginLeft: "+=250px", }, 1000 ); }); < ...

javascriptjqueryhtmlclick

Building a chat console resembling IRC using JavaScript

I am a novice in HTML and JavaScript. I am currently working on creating a simple program that takes input from the user via the command line and displays it in a large console window. However, when I enter a simple text, nothing is displayed in the box. D ...

javascripthtml

H4 Heading in CSS/Bootstrap not aligning centrally

Having some trouble centering a <h4> title within a bootstrap modal. Here is the code snippet: <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="moda ...

cssbootstrap-4

I am interested in showcasing a card when it is hovered over

I am having trouble with a hover effect to display a hidden card. I have two div elements, one is labeled single-album and the other hide. I used the + selector to set the hide div to display none initially, but the hover effect is not working as expecte ...

htmlcsscss-selectorsmousehoveronhover

Issues with concealing the side menu bar in Vue.js

I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar. The following images represent ...

javascripthtmlcsstypescriptvue.js

The <img> element is able to fill an entire div while maintaining its original aspect ratio

I am currently facing a challenge with implementing a responsive gallery slider in Bootstrap. In order to achieve responsiveness, I need to use properties like max-height. The issue arises from the fact that the images in the gallery can vary in size and ...

htmlcsstwitter-bootstrap

JSDOM failing to retrieve complete list of elements from webpage

I'm currently struggling with a simple webscraper using JSDOM. Here's the code snippet I've been working on: const axios = require("axios"); const jsdom = require("jsdom"); const { JSDOM } = jsdom; let v = "15" ...

javascripthtmlnode.jsjsdom