Bollate

HTML

[ANSWERED] html – My background image is not responsive when I shrink my browser

By

Nov 20, 2022 , ,

Solution 1 :

If it didn’t load the background image chances are that the specified url in the url() function is not correct. If this is the folder structure of your project
-root
-images
-index.html
Then the code you have should work. If the structure on the other hand is different, then you must change the path to match the images directory.

If the image finally loads, do note that you must add CSS code similar to the one below:

.home-inner img{
  object-fit: 'cover';
}

…especially when a fixed width and height properties are defined on the image.

Solution 2 :

The question you’re asking is somewhat arbitrary so let’s consider this an opportunity to debug common image loading issues.

You’ve specifically asked about your background image showing up.

Your CSS Declaration

.home-inner {
    background-image: url(images/h1.png);
}

First let’s inspect the element in question. These instructions assume you’re using chrome, but can be used similarly in different browsers.

  1. Right click on the <div class="home-inner"> div and “inspect”. Dev tools should open and you should see Elements and Styles tabs opened.
  2. In the elements tab, make sure you your <div class="home-inner"> element is highlighted. If it isn’t try expanding or collapsing surround elements until you can select it.
  3. Once you have the correct element selected look at your styles tab. If your class .home-inner is properly declared in your stylesheet you’ll see a replicated version of your css styles. Exactly the same as your declaration above.
  4. This is where the debugging starts. First, is #3 true? Are you seeing your css declaration? If not, there may be an issue with the path to your css file, or a typo in your class name. If you can see the class, move on to step 5. If not, determine the cause.
  5. Can you see your declaration but there’s a strikethrough? If so, that likely means that the browser can’t find your image and it’s 404’ing. This will also show an error in the console, but let’s try to keep it simple. One trick I like to use is to right click on the image path and “Open in new tab”. Once you do that you’ll open a page with the fully computed path to your image in the url bar.
  6. Take a look at that path and try to determine if the folder structure is correct. For example you’ve implied that your folder structure has an image folder so it might look something like this: https://example.com/images/h1.png. But perhaps your image folder is nested, and your folder structure is something like: /assets/images/h1.png.
  7. Still not fixed? Where is your css file? If it’s nested (not in the root folder) you’re going to have to add some form of ../ to your image path in order to tell the browser where to properly look. For example, if your css is found in /css/styles.css your background image url would look need to look like this: background-image: url(../images/h1.png);. The ../ means go back one folder.

It’s probable that debugging the above will solve your issue. If not please update your question with additional details.

Problem :

I was following along a youtube tutorial on creating a website with bootstrap (link:https://www.youtube.com/watch?v=V_lAhqLXT9A&t=851s) but once I reached the part of setting the background image, it didn’t become responsive as in the video.

this is my html code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XxXx</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

</head>
<body data-spy="scroll" data-target="#navbarSupportedContent">   

<!-- Home -->

<div id="home">
  <nav class="navbar navbar-expand-md navbar-light fixed-top">
    <a class="navbar-brand" href="#">
    data-target="#navbarSupportedContent">
  <span class="navbar-toggler-icon"> </span>
    </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="#services" id="navbarDropdown" role="button" 
data-toggle="dropdown">Our Services</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>

</ul>
</div>
</nav>
<!-- landning page -->
<div class="landing">
  <div class="home-wrap">
    <div class="home-inner"><img src="images/h2.png">
    </div>
  </div>
</div>

<div class="caption text-center">
  <h1>XXXXX</h1>
  <h3>xxxxxxxxxx</h3>
  <a class="btn btn-outline-dark btn-lg" href="#contact">Contact</a>
</div>
<!--end of landing page -->
</div>
<!-- About -->
<div id="about" class="offset">

</div>
<!-- Services -->
<div id="services" class="offset">

</div>
<!-- Contact -->
<div id="contact" class="offset">

</div>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
</body>
</html>

I tried to put .home-inner{background-image: url(images/h1.png);} in my css file but it didn’t even upload the image. I tried background-size:cover and changing it’s position, but nothing changed.

Comments

Comment posted by Chris W.

Howdy, welcome to SO. A couple things. It would be helpful to see your CSS in question as well and a way to reproduce (hint: Put it in the code editor since all your bootstrap stuff is external URLs it will load but you’ll need to supply the relevant css from styles.css). Also you’re loading all your javascript files twice in the head and the body, you should stick with one declaration per external files, beyond that give us more to help you and we’ll get you sorted.

Comment posted by jsfiddle.net

Please put together an example that others can see to help you. Probably on something like

Comment posted by Kundan

Have you tried using

Comment posted by Dana

Hi, so I followed along with your steps and I fixed the image path and it showed me the image when I opened it on a new tab. But it still won’t load on my webpage. Is there another meaning to that? it only seems to work when I add inside the div class=home-inner. But even with that it doesn’t shrink when I shrink my browser.

Comment posted by Dana

I actually noticed it would only load on my webpage if I added some text inside the div class=inner-home element. But not as a whole image, only the size of the text block. Do you know why? Or how I can make my image appear full size? Thank you so much and let me know if you need more clarification.

By

Related Post

HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022
HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022