Adjust the height of the image without altering its width

I've encountered an issue with my responsive design. While all elements adjust properly when resizing the height and width of the browser, the background image only changes when I resize the height. When I resize the width, it remains the same.

Original image: https://i.sstatic.net/JKPRn.jpg

Width resized image: https://i.sstatic.net/DTeh5.jpg

Thank you for any assistance provided.

HTML:    
         <div class="wrap-hero-content">
              <div class="hero-content">
                <span class="typed"></span>
              </div>
          </div>
          <div class="mouse-icon margin-20">
            <div class="scroll"></div>
          </div>

CSS:    #home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;

        .wrap-hero-content{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        }

        .hero-content{
        position: absolute;
        text-align: center;
        min-width: 110px;
        left: 50%;
        top: 58%;
        padding: 65px;
        outline-offset: 8px;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        }

Answer №1

Consider inserting this code snippet:

background: url('../images/testimonial-bg.jpg') center no-repeat;
I've included the background-position property set to center. It might be beneficial for your situation

#home {
    background: url('../images/testimonial-bg.jpg') center no-repeat;

    -webkit-background-size: cover;
    background-size: cover;

    height: 100%;
    width: 100%;
    display: block
}

Answer №2

apply this css

#home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;
}

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

React js background image not filling the entire screen

Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...

I'm currently working on building a form with the Angular framework, but I'm facing a challenge in displaying all the

I am having trouble with my Angular form as I am only able to display two fields when the page is loaded. Code snippet from Component.html: <div class="card m-3"> <div class="card-body"> <form [formGroup]="surveyFor ...

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I en ...

Incorrect formatting of HTML email on Outlook

Here is the code snippet I am using for an HTML email: <div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;"> <img src="https://via.placeholder.com/140x99" height="140" wi ...

Generate an image of a "button" with dynamic hover text

I am trying to create a clickable image with dynamically changing text overlaid on it. I have the PHP code that retrieves the necessary information for the text, but I am struggling to create the button as I am new to this type of task. Here is an example ...

Bootstrap Containers Misaligned

I have been developing a website with two containers, one on the left and one on the right. By executing the following HTML code, you can see the structure: <!DOCTYPE html> <html lang="en"> <head> <link rel=& ...

Troubleshooting issues with the sidebar navigation in Laravel project using Vue and AdminLTE

I successfully installed AminLte v3 via npm in my Laravel + vue project and everything is functioning properly. However, I am facing an issue when I attempt to click on the main menu item in the Side navbar that is labeled as <li class="nav-item has-tr ...

How to Embed Images from a Different Server Using PHPmailer

Currently, I am using phpmailer and AddEmbeddedImage to send emails. The web application I am working on sources data from two different servers: and . The website is hosted on and all scripts are executed from there as well. However, when I use phpmaile ...

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

Displaying images above a Bootstrap Carousel

I am looking to create a dynamic mobile image slider using Bootstrap carousel with overlaying images. However, I am facing two issues with responsive resizing and the overlapping of sections due to absolute positioning. <section> <h2 style= ...

The art of bringing a pseudo class to life through animation

Seeking assistance with achieving a unique effect on click event. I have set up a slanted or razor-blade style div using a parent div element and a pseudo-element :after (as shown below). My goal is to change the skew angle when the user clicks on the pare ...

Is it possible to continuously generate webpages using AJAX?

Is there a way to achieve an infinite scrolling effect in all directions using ajax requests without the need for flash or silverlight? If anyone has an example of this, I would love to see it! Thank you for your time. ...

Steps for assigning innerHTML values to elements within a cloned div

Currently, I am setting up a search form and I require dynamically created divs to display the search results. The approach I am taking involves: Creating the necessary HTML elements. Cloning the structure for each result and updating the content of ...

Retrieving checkbox value upon form submission

Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

I'm still getting the hang of things, so I apologize if my question isn't perfectly clear. What I'm trying to do is create a dynamic progress bar with multiple colors that animates upon loading the page. I've seen some examples similar ...

The Laravel return view function seems to be malfunctioning as it is displaying an error page instead

I am facing an issue where I am trying to display an existing view but instead of the show page, I keep getting a "404 not found" error. As a beginner in Laravel, I am still trying to grasp its concepts. Any insights into why I am encountering the error 40 ...

The stature of Bootstrap's columns

Exploring Bootstrap has been an exciting journey for me, as I believe it will simplify the process of creating visually appealing web pages. I'm currently facing a challenge in understanding these two examples: Bootstrap 3: http://codepen.io/rhutchi ...

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...