Bootstrap background image styling

Hello there, this is my very first post on Stack Overflow. I'm currently working on a challenge from Frontend Mentor and need some assistance. I've created a container with 2 columns and I want to add an SVG background image to the left column. I initially inserted the SVG directly into the HTML file and it displayed fine, but when I tried adding CSS styling, nothing happened. Below is the code snippet I've been using:

<body>
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7 left">
        <h1> We're coming soon</h1>

      Hello fellow shoppers! We're currently building our new fashion store.
      Add your email below to stay up-to-date with announcements and our launch deals.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>




.left{
    background-image: url('images/bg-pattern-desktop.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}

Could anyone offer some guidance on this issue?

Feel free to leave a comment on my initial question.

Thank you, Karsten

htmlcssbootstrap-4

Answer №1

Success! Give this a shot with bootstrap version 4.4.1

.left {
  background: url('images/bg-pattern-desktop.svg') no-repeat center center fixed;
  -webkit-background-size: cover;
   height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7 left">
        <h1> Coming soon!</h1>

      Greetings shoppers! Our new fashion store is in the works.
      Enter your email below for updates on releases and special offers.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>
</html>

Answer №2

It is important to place your CSS within the <style> tags if you are incorporating it into an HTML file

If you are linking a separate CSS file, ensure that the image path is correct or check the console for any potential 404 "file not found" errors

<body>
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7 left">
        <h1> We're coming soon</h1>

      Hello fellow shoppers! We're currently constructing our new fashion store.
      Enter your email below to receive updates on announcements and our launch offers.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>

<style>
.left{
    background-image: url('images/bg-pattern-desktop.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}

</style>

Answer №3

If you want to make it work, follow these steps:

Everything else looks good, but make sure to provide the exact path:

{
  background-image: url("C:\Desktop\images\bg-pattern-desktop.svg");
}

Find out where the image is stored, from the root disk, and add the image name after the directory.

For example: Root directory + Image Name c:\Users(username)\Desktop\ + picture.jpg.

Answer №4

Try out this snippet for implementing a background image with Bootstrap:

<body class="left">
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7">
        <h1> We're coming soon</h1>

      Greetings, valued shoppers! Our new fashion store is currently under construction.
      Enter your email below to receive updates on announcements and exclusive launch offers.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>

.left{
    background-image: url("https://example.com/image.jpg");
    height:100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}
body{
height:100%;}

Feel free to incorporate this code into your project.

Thank you!

Answer №5

If you want to showcase an image as the background in one column and text in another column on the same row using Bootstrap Grid, check out this example.

.container {
  margin: 20px;
  padding: 20x;
  display: flex;
}

.left {
  background-image: url("https://image.shutterstock.com/image-photo/sunset-over-ocean-260nw-66975196.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: auto;
}

body {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Radha Yadav Web Developer</title>
    <link rel="stylesheet" href="css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="BackgroundImage.css" /> 
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 left">
          <h1>We're coming soon</h1>

          Hello fellow shoppers! We're currently building our new fashion store.
          Add your email below to stay up-to-date with announcements and our
          launch deals. Email Address
        </div>

        <!-- Right side -->
        <div class="col-md-6 right">
            <h1>We're coming soon</h1>

            Hello fellow shoppers! We're currently building our new fashion store.
            Add your email below to stay up-to-date with announcements and our
            launch deals. Email Address
      </div>
    </div>
  </body>
</html>

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

Mix up your elements by having some inline and others block, all based on their neighboring elements

In my project, I am working on showcasing a list of 'input' and 'textarea' elements within a flex box arrangement. Each element needs to have a width set to 45% of the flex box. One challenging issue that arises is the following: I am s ...

htmlcssangular

Responsive Design - optimizing wide tables for various screen sizes

Currently working on a proof of concept involving responsive design. Encountered some challenges with wide tables on a web page - unsure how to adjust table width to eliminate horizontal scroll bar on mobile browsers. Seeking suggestions for handling extr ...

javascripthtmlcssresponsive-design

Applying identical values to multiple properties (CSS)

Can we assign a single value to multiple CSS properties at once? border-left, border-right: 1px solid #E2E2E2; Similar to how we can with selectors? .wrapper, .maindiv { ... } ...

css

Troubleshooting: AngularJS ng-repeat not functioning correctly with array iteration

I've been encountering an issue while trying to create a loop using ng-repeat to iterate over an array of objects. It appears that the loop isn't running as expected. To provide some context, I have set up a jsfiddle - http://jsfiddle.net/a2xhzb ...

javascripthtmlangularjs

Tips on saving HTML files from googlevis package in R

R version: 3.2.2 Operating system: Windows 8.1, using both IE and Chrome browsers Whenever I try to create a motion chart by plotting data, I encounter an issue. m = gvisMotionChart(Fruits, idvar=’Fruit’, timevar=’Year’); plot (m) After generati ...

htmljsonrrstudiogooglevis

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

Can someone assist me with moving additional product images next to the main product image in the default opencart 2.0.1.1 theme? Currently, they are appearing below the product image and I would like them to be displayed alongside it instead. ...

css

Tips for dealing with a div that needs to be contained within another element with scrollbars?

I am facing an issue with a div that has specific dimensions (height:x; width:y; overflow:auto;) and displays the content of an article. The problem arises when the content exceeds the div's limits, causing a scrollbar to appear for navigation. Withi ...

javascriptcsshtml

Ways to update a div periodically with new data fetched from a file - Here's How!

I am looking to auto-refresh a specific div every few seconds on my index.php page below. <?php session_start(); if (! check_write()) { redirect('testlogin.php'); return; } if (file_exists('lmt.json')) { $lmt = json_de ...

javascriptphphtmljqueryajax

The confusion between <g:if> and <g:set> features in Grails is causing some issues

I am working with a gsp template that includes a variable. If this variable is true, I want to add an extra button; if it's false, nothing should happen. What could be causing my code to not work correctly? <g:set var="removeButton">{{ removeB ...

htmlgrailsbuttonif-statement

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml

Implement HTML code within WordPress labels

Seeking assistance with customizing certain menu items in a WordPress website. Wondering if it's feasible to include HTML/CSS in the title label? My current situation is as follows: I only want one result to be highlighted in blue. I attempted to ...

phphtmlcsswordpress

How can I safeguard my HTML and CSS content from being altered using tools similar to Firebug?

Is there a method to deter the alteration of HTML and CSS components on a webpage using tools similar to Firebug? I have noticed that certain users are changing values in hidden fields and modifying content embedded within div or span tags for their perso ...

phpjavascripthtmlcss

Is there a way to determine if a parent of my HTML element possesses a CSS class?

Looking at this HTML code snippet - <div id="parent" class="foo"> <div id="child"> </div> </div> Is there a way to create a test to verify if the child element is utilizing the foo class? I attempted: element .children("#chi ...

javascriptcssangularjsjasminecss-selectors

Having trouble with your JQuery code?

I created this program to toggle the visibility of a message on a webpage. The hiding and unhiding functionality is working, but I am encountering an issue when trying to change the text on the button. Here is the HTML Code: <!DOCTYPE html> < ...

jqueryhtml

Adding information directly into the <li> element

I'm feeling a bit unsure about the semantic correctness of this code snippet: <ul> <li>Winter</li> <li>Summer</li> </ul> While I understand that the <li> tag can contain any type of content, both block ...

html

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

I am developing the frontend of my application using a combination of bootstrap, react, and nextjs. I attempted to implement the example provided by react-bootstrap at https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. ...

cssnode.jsreactjsnext.jsbootstrap-5

What is the best way to incorporate a sliding div into these CSS Message Bubbles?

Just dipping my toes into web development, so please bear with me. I am working on a prototype of a Messaging Application and have most of the basics sorted out. Now, I am adding some finishing touches to enhance user experience. My goal is to make it so t ...

htmlcss

Calculating the sum of fields added dynamically using jQuery

I am currently working on a dynamic table where I can add rows dynamically. However, I am facing an issue in including a subtotal at the bottom of the table. This is what I have tried so far: Here is the JavaScript code snippet: $(document).on('chan ...

javascriptjqueryhtmlarrays

The functionality of my input and button tags is compromised because of the background animation

I'm facing an issue with the username and password input fields, as well as the login button. These elements are placed on a rectangle within an SVG tag. The problem seems to be related to the animated background applied to one of the div elements in ...

htmlcsswebbootstrap-4web-deployment

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

cssangularcss-animations