Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally

But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to be. This is how I want the image to look (the nature image)

So what I'm aiming for: I want the nature image, as seen in the first picture, to be displayed just like in the second picture (with dev tools). I know the image isn't sized right for the box. However, I'm struggling to fix it and can't seem to find a solution online.

Can someone assist me with this issue? If my question isn't clear enough, please let me know what I should add!

Here is the CSS code linked to the image-parallax:

 .header{
        background-image: url("nav-bg.png"); //The background image
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }
    
    .parallax-2 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

The HTML code:

<div class="header parallax-2">
        <div class="logo fade-in-3"><img src="logo.png" alt="BeldrProductions" width="500"></div>
        <!-- The nav-items go here. but I left them out to save space-->
</div>

Looking forward to your response! Beldr

Note: Suggestions from the responses below:

  • background-size: contain no-repeat; (doesn't work)
  • object-fit: contain and object-fit: cover (also doesn't work)
  • width&height 100% (no success)

Check out my code on JSfiddle: https://jsfiddle.net/BeldrProductions/k5f70dy9/

Answer №1

Make sure to enclose your background image container within an additional div element. Inspect the provided HTML and CSS code snippets below, and refer to the screenshots.

<body>
    <div class="header">
      <div class="parallax-2">
        <div class="logo fade-in-3">
          <img src="logo.png" alt="BeldrProductions" width="500" />
        </div>
      </div>
      <!-- The nav-items go here. but i left them out to save space-->
    </div>
</body>

 <style>
  .header {
    height: 300px;
    width: inherit;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .parallax-2 {
    height: inherit;
    width: inherit;
    background-image: url("nav-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
</style>

https://i.sstatic.net/GcTJ1.jpg

https://i.sstatic.net/FBGCB.jpg

Answer №2

Grateful for the assistance from everyone. However, I managed to solve it without using an image.

Thank you and goodbye!

If anyone else has a solution, feel free to share it below. I am eager to learn more.

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

Challenges with resizing floating divs

As a beginner in Web Development, I am tasked with creating a web portfolio for an assignment. In my design layout, I have a navigation bar in a div floated left, and a content div floated right serving as an about me section containing paragraphs and lis ...

Problem with structuring a Html5 web page

Recently, I created a web page using HTML5. Check out the code below: <header> <img src="img/logo.png" alt="logo"> <hr class="hr-style"> <h1>The Articles</h1> <nav> <ul> <li><a href="#" ...

Strategies for creating a grid-inspired layout: tips and tricks

Recently, I've been tasked with creating a catalogue section for our e-commerce site. My designer came up with this layout which I find really appealing, but I'm having trouble figuring out how to implement it. I attempted using tables, but it di ...

Distinguishing between these two hover text types: JQuery CSS, what sets them apart?

As a total jQuery novice, I've been curious about the difference between these two types of text that appear when you hover over something. Can someone please clarify what each one is? Thank you very much. First hover text: When hovering over the up- ...

Adhesive Navigation Bar

Check out this link: JSFIDDLE $('.main-menu').addClass('fixed'); Why does the fixed element flicker when the fixed class is applied? ...

Techniques for preventing background layering using CSS

I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this: input.button { background-image:url(/path/to/image.png); } Furthermore, I would like to display a dif ...

Creating TypeScript types for enums can make your code more robust and ensure that you are using

I need to create an interface based on the values of an enum for a React use-case. The enum contains key value pairs that are used as form IDs. When the value of an input element is changed in an event listener, I want to set the state using this.setState( ...

Issue with Internet Explorer's CSS

It appears that this page is not displaying correctly in Internet Explorer 9, along with possibly older versions as well. The issue seems to be with the right menu floating to the bottom of the page. Firefox, Chrome, and Safari are all rendering it correct ...

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

I am attempting to connect a mat-table with data from the backend API following this Angular Material Table Dynamic Columns without model. Below is the relevant content from the .ts file: technologyList = []; listTechnology = function () { ...

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

I am having trouble placing the button within the image

Essentially, my goal is to place the button within the image and ensure it remains in its position when transitioning to mobile mode or adjusting window size. This is the desired outcome: https://example.com/image https://example.com/button-image .img ...

Utilizing combined selectors in styled-components: A comprehensive guide

My existing CSS code is structured like this: .btn_1 { color: #fff; background: #004dda; display: inline-block; } .btn_1:hover { background-color: #FFC107; color: #222 !important; } .btn_1.full-width { display: block; width: 100%; } I ...

Creating a tiny arrow using CSS

Can anyone advise on the best way to create a small arrow design using CSS? I have tried using a regular closing > arrow, but it's not quite what I'm looking for. https://i.stack.imgur.com/7uLMG.png ...

Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advanc ...

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

https://i.stack.imgur.com/GQAMy.jpg I am facing a challenge with joining two tables, table1 and table2, in MySQL. I need assistance in creating the resultant table as shown in the attached picture. Your help in solving this issue would be greatly appreci ...

The ultimate guide to disabling iframe scrolling on Internet Explorer 8

After extensively searching for a solution, I realized that most answers focused on removing scrollbars rather than completely preventing the page from scrolling. My issue involves embedding an index.php file in an iframe on my website. Within the index.ph ...

defined dimension of table cell

<table class="data-table"> <tr> <th style="width: 200px;"> DescriptionDescription <%--in this case <td> is resized--%> </th> </tr> <% foreach (var item in Model) { %> ...

Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

I am facing an issue with Angularjs and the table tag when using group loops. The problem arises in achieving correct zebra striping for the list. How can I solve this to ensure the zebra pattern is applied correctly? <table> <tbody> <tr ...

What causes a neighboring div to change width when a multi-line span is present?

Here is my React code: <InfoWrapper> <InfoCircle> <span>i</span> </InfoCircle> <span className="info-label"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. elit. </span> </InfoWrap ...

Is there a way to modify existing code in bootstrap4 using CSS?

Is there a way to customize the CSS in Bootstrap, specifically when it comes to changing the fonts and colors in the carousel component? If you have any insights on this, please share! ...