Tips for incorporating unique images into each individual flex box

I am new to the world of coding, having just embarked on this journey less than a week ago. Following a tutorial by a developer on YouTube, I tried to add my own twist to the project in order to differentiate it from the original. However, I've hit a roadblock.

My goal was to assign a unique background image to each flex box within the "Services" section. Despite my efforts to create a separate div for the image, similar to the .icon and the <p>, I encountered issues with the positioning and visibility of the images within the boxes.

Upon inspecting the code, I realized that all the boxes shared the same background image due to the main container setting the background for all elements.

I'm struggling to find a solution that allows me to have distinct background images for each box.

Your assistance would be greatly appreciated!

/* Services Section */

#Services {
  background-color: #f4f6ff;
}

#Services .services {
  flex-direction: column;
  text-align: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 50px 0;
  background-color: #f4f6ff;
}

.header-title {
  font-size: 3rem;
  font-weight: lighter;
  color: black;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1rem;
  text-align: center;
}

#Services .section-header p {
  font-size: 1rem;
  font-weight: lighter;
  margin-top: 2px;
  margin-bottom: 20px;
  font-family: sans-serif;
}

#Services .services-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#Services .services-content {
  flex-basis: 90%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  border-radius: 10px;
  background-image: url(./img/customer-support.jpg);
  background-size: cover;
  margin: 10px 5%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#Services .services-content::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%);
  opacity: 80%;
  z-index: -1;
}

#Services .services-cards .icon {
  height: 90px;
  width: 50px;
  margin-bottom: 0;
}

`enter code here` #Services .services-content h2 {
  font-size: 1.2rem;
  color: gold;
  text-transform: uppercase;
}
<! -- Services Section -->
<section id="Services">
  <div class="services container">
    <div class="section-header">
      <h1 class="header-title">Services</h1>
      <p>I have worked with successful businesses over the years, I have helped companies activate their audience through social media marketing, facilitated the on-boarding process for their new customers.<br><br>I also managed projects for 20 plus brand
        ambassadors and led company team members so they can produce quality and engaging content delivered to our social media channels efficiently.</p>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Customer Support</h2>
        <p>I have worked as a BPO Rep for 3 years. I have the fundamental knowledge in handling customer calls, emails and provide the adequate support, so that you can focus on the important aspect of your business.</p>
      </div>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Administrative Assistant</h2>
        <p>Data entry, Research, Invoicing, Calendar Management, CRM maintenance, Appointment Setting, Recruitment, and more. I will take charge of the routine back-office tasks and you can keep focus on what matters for your brand.</p>
      </div>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Porject Management</h2>
        <p>Launching a new product? Do you need help in Content creation and Scheduling? Or are you looking for a point-person to lead your marketing team and start pulling-in audience for your brand? I have 5 years of Social Media management experience,
          supported brands with different products catering to different demographics. I can develop a distinct strategy that will work for you. </p>
      </div>
    </div>
    <div class="services-cards">
      <div class="services-content">
        <div class="icon"><img src="" /></div>
        <h2>Front-End Web Development</h2>
        <p>I can hand-code HTML, CSS with some knowledge in CSS Flexbox, Bootstrap, and Javascript.</p>
      </div>
    </div>
  </div>
</section>

htmlcssflexbox

Answer №1

When discussing the topic of

Cascading Style Sheets (CSS)

#Services .services-content {
...
background-image: url(./img/customer-support.jpg); 
...
}
#Services .services-content::after {
...
background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%);
...
}

and this specific HTML structure

<div class="services-content">
...
</div>

One solution is to introduce a new class that will modify the background-image property for each instance of .services-content, like so:

CSS

#Services .first-content {
...
background-image: url(different); 
...
}
#Services .first-content::after {
...
background-image: linear-gradient(different);
...
}
#Services .second-content {
...
background-image: url(different); 
...
}
#Services .second-content::after {
...
background-image: linear-gradient(different);
...
}

And then for each corresponding HTML element

<div class="services-content first-content">
...
</div>
<div class="services-content second-content">
...
</div>

This approach allows you to selectively update the background-image while keeping the rest of the CSS intact.

Answer №2

If you are looking to apply a unique gradient for each div.services-content, consider adding the following CSS selectors:

<style>

        #Services {
        background-color: #f4f6ff;
    }
    #Services .services {
        flex-direction: column;
        text-align: center;
        max-width: 1500px;
        margin: 0 auto;


        padding: 50px 0;
        background-color: #f4f6ff;
    }

.header-title {
    font-size: 3rem;
    font-weight: lighter;
    color: black;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1rem;
    text-align: center;
}

#Services .section-header p {
    font-size: 1rem;
    font-weight: lighter;
    margin-top: 2px;
    margin-bottom: 20px;
    font-family: sans-serif;
}
#Services .services-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#Services .services-content {
    flex-basis: 90%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 25px;
    border-radius: 10px;
    background-image: url(./img/customer-support.jpg);
    background-size: cover;
    margin: 10px 5%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#Services .services-content::after {
    content:'';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 100%;
    /* background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%); */
    opacity: 80%;
    z-index: -1;
}


#Services > div > div:nth-child(2) > div{
background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%);
}
#Services > div > div:nth-child(3) > div{
background-image: linear-gradient(60deg, #0a2647 0%, red 100%);
}
#Services > div > div:nth-child(4) > div{
background-image: linear-gradient(60deg, #0a2647 0%, yellow 100%);
}
#Services > div > div:nth-child(5) > div{
background-image: linear-gradient(60deg, #0a2647 0%, blue 100%);
}


#Services .services-cards .icon {
    height: 90px;
    width: 50px;
    margin-bottom: 0;
}
#Services .services-content h2 {
    font-size: 1.2rem;
    color: gold;
    text-transform: uppercase;
    }
</style>

<section id="Services">
    <div class="services container">

        <div class="section-header">
            <h1 class="header-title">Services</h1>
            <p>I have worked with successful businesses over the years, I have helped companies activate their audience through social media marketing, facilitated the on-boarding process for their new customers.<br><br>I also managed projects for 20 plus brand ambassadors and led company team members so they can produce quality and engaging content delivered to our social media channels efficiently.</p>
        </div>
        <div class="services-cards">
            <div class="services-content">
                <div class="icon"><img src=""/></div>
                <h2>Customer Support</h2>
                <p>I have worked as a BPO Rep for 3 years. I have the fundamental knowledge in handling customer calls, emails and provide the adequate support, so that you can focus on the important aspect of your business.</p>
                </div>
            </div>
        <div class="services-cards">
            <div class="services-content">
                <div class="icon"><img src=""/></div>
                <h2>Administrative Assistant</h2>
                <p>Data entry, Research, Invoicing, Calendar Management, CRM maintenance, Appointment Setting, Recruitment, and more. I will take charge of the routine back-office tasks and you can keep focus on what matters for your brand.</p>
            </div>
        </div>
        <div class="services-cards">
            <div class="services-content">
                <div class="icon"><img src=""/></div>
                <h2>Porject Management</h2>
                <p>Launching a new product? Do you need help in Content creation and Scheduling? Or are you looking for a point-person to lead your marketing team and start pulling-in audience for your brand? I have 5 years of Social Media management experience, supported brands with different products catering to different demographics. I can develop a distinct strategy that will work for you. </p>
            </div>
        </div>
        <div class="services-cards">
            <div class="services-content">
                <div class="icon"><img src=""/></div>
                <h2>Front-End Web Development</h2>
                <p>I can hand-code HTML, CSS with some knowledge in CSS Flexbox, Bootstrap, and Javascript.</p>
            </div>
        </div>
    </div>
</section>

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

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

javascriptjqueryhtmltwitter-bootstrap

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

cssreactjsionic-frameworkshadow-dom

Clicking on a hyperlink within an Angular Material button does not prompt the browser to navigate to the linked page

Currently, I am utilizing Angular Material with AngularJS v1. Encountering issues with a simplistic menu bar while utilizing angular material. Below is the piece of HTML code representing the menu bar: <md-toolbar layout="row" class="md-whiteframe-z3" ...

htmlangularjsbuttonangular-material

What is the best way to switch back and forth between two div elements?

I've been attempting to switch between displaying div .cam1 and div .cam2, however, I can't seem to get it to work. Here's the code snippet in question: HTML: <div class="cam1"></div> <div class="cam2"></div> CS ...

javascriptjqueryhtmlcss

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

Strategies for optimizing progressive enhancement

Designing a website that is accessible to everyone is truly an art form, and Progressive Enhancement is something I hold dear... I am curious to hear about the best techniques you have used to ensure websites work for all users, regardless of their browse ...

javascripthtmlprogressive-enhancement

Loop a background image around a header that is centered in the design

I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image. However, when I try to repeat the ...

htmlcss

Tips for applying/styling "All Items Center" and "Space Between Items" in CSS and ReactJS

justify-content: space-evenly; seems to be working correctly, but the desired output is not achieved I am aiming for something like this: https://i.stack.imgur.com/iQoWK.png However, this is what I currently have: https://i.stack.imgur.com/1PxGR.png ...

cssreactjsflexboxjsx

Using JQuery to eliminate the current div in an image slider

I currently have an image slider that allows users to switch between images. There are two buttons - one adds a new item to the slider, while the other is supposed to remove the current image from the slider, but it doesn't seem to be working properly ...

javascriptjqueryhtmlcss

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ＡＢＣ), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

javascripthtmlcsschar

Navigating to User's Specific Info Page using Node.js

Would love some input on my current issue. I have a table featuring a list of users, and my goal is to display user information in detail whenever a user (which corresponds to a row in the table) is clicked. The process involves identifying which user was ...

javascripthtmlnode.jsexpress

How can we use JavaScript to add a class to the <html> element?

What is the method to apply a class to the root element <html> in JavaScript? ...

javascripthtml

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

javascriptcssvue.jsresizescrollable

Is it possible to bypass the confirmation page when submitting Google Form data?

Is there a way to bypass the confirmation page that appears after submitting a form? What I would like is for the form to simply refresh with empty data fields and display a message saying "your data has been submitted" along with the submitted data appea ...

javascriptphphtmlforms

How can you set up a button to trigger an action only after reaching a specified number of clicks?

Is it possible to create a button in HTML that remains inactive until a specific number of clicks have been registered? Imagine a scenario where a button does nothing when clicked until it has been tapped 100 times. Upon the 100th click, it redirects to a ...

htmlbuttonclick

Display or conceal div elements using JavaScript

Is there a way to hide certain divs when clicking on a specific div box? Clicking on the box will trigger the hiding of some application divs. See the first image below: When the boxes are hidden, the other divs will readjust in place of the current divs ...

javascripthtmlcsstwitter-bootstrap

Can you explain the distinction between ng-init and ng-bind?

Here is a code snippet utilizing ng-init: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="" ng-init="names=['Jani','Heg ...

htmlangularjs

Numerous toggles available for the mobile version

Hey there, I need some help! I have a footer navigation on my desktop website with 3 Ul elements. I want to turn each Ul into a toggle for the mobile version. Can anyone assist me with this? Thanks in advance! <footer class="footer"> <d ...

javascriptjqueryhtmlcss

What is the methodology behind stackoverflow's implementation of comments functionality?

I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...

htmlajax

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

javascriptjqueryhtml