resizing problem with images that adapt to different screen sizes

I've been working on creating a responsive website, but I'm having trouble with the resizing of the two background images I added to the header. When I view the site on a mobile device, the header appears squashed. I think this might be because I set a fixed height for the header. I've tried using the 'height:auto' property, but it hasn't solved the issue. Can anyone help me figure out what I'm doing wrong?

#header{
background: url(images/page_header_1024px.png) no-repeat;
background-size: 100% 100%;
max-width:1024px;
min-height: 100%;
margin: 0 auto;}

click here

htmlcssresponsive-designcss-animations

Answer №1

Format your code in this way:


    body, html{
     height:100%;
    }
#header{
 min-height:100%;
}

Answer №2

Have you considered using a standard tag instead? By doing so, the browser will automatically resize it for you - you can test this by resizing the page with just your image in its own window:

Does that achieve the desired effect?

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

Achieve a fading effect on an element as you scroll down the page

I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this? He ...

javascripthtmlcss

Generating a unique JavaScript array by extracting data from an HTML input element

I am working on a basic HTML form that requests a number between 1 and 10 from the user. Depending on this number, I aim to generate a new array. Currently, the code displays an alert box with the newly created array, but my end goal is to have a table p ...

javascripthtmlarraysfunction

Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users ...

javascriptjqueryhtmlcssshow-hide

Working with HTML5 Canvas to Clip Images

Is there a way to implement a tileset image in canvas like this one? I am trying to figure out how to make it so that clicking on the first tile returns 0, clicking on the tenth tile returns 9, and so on... Any suggestions on how to clip a tileset on an ...

javascripthtmlcanvas

The Google Map is unable to expand to fill the entire width of the column

I have exhausted all my efforts trying to troubleshoot this issue on my project's contact page. Currently, I have a layout with 3 rows containing columns within a Bootstrap 4 grid. The third row is supposed to display a Google Map within a column set ...

htmlcssbootstrap-4

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...

c#htmlasp.netcssevopdf

Fix the Bootstrap navbar that is obstructing the link to content on the page

Currently, I am implementing Bootstrap 4, with a fixed-top navbar at the top of the screen. Everything works perfectly fine, except for one issue when linking to elements on the same page. When I target an element further down the page from one of the nav ...

cssbootstrap-4

Issue with React rendering numbers without displaying div

In my user interface, I am attempting to display each box with a 1-second delay (Box1 after 1 second, Box2 after another 1 second, and so on). https://i.sstatic.net/FdTkY.png However, instead of the desired result, I am seeing something different: https ...

javascripthtmlcssreactjsreact-dom

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components? I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this ...

cssreactjsmaterial-ui

Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side https://i.sstatic.net/ZKdj7.png Here is the code I am using: <div class="col-xl-4 col-lg ...

htmlcssbootstrap-4

Tips for eliminating stuttering when fixing the position of an element with JavaScript

I am currently facing an issue with a webpage I created where the text freezes when scrolled down to the last paragraph, while the images continue to scroll. Although my implementation is functional, there is noticeable jankiness when using the mouse wheel ...

javascripthtmlcssanimation

Troubleshooting problems with encoding in a PHP contact form

As a newcomer to PHP, HTML, and programming in general, I am working on creating a contact form using PHP and HTML. So far, everything is functioning properly and I am able to receive emails. However, there is one issue - when I try to fill out the form in ...

phphtmlencoding

A guide on displaying parent and child items from an array using PHP

I am a beginner in php and I have a simple question. I want to create a parent-child view using an array with key id and key parent. How can I properly structure this in a cycle? Do I need to start by creating a function for building the tree? -Apple ...

phphtmlparent-child

Tips for containing a moving element within the boundaries of its container div

I have a dynamic box placed inside another box, and I want to restrict its movement within the boundaries of the parent container. How can I achieve this? In simpler terms: I need the frog to stay within the frogger. HTML <div id="frogger"> ...

javascriptcssanimationhtml

Center the navbar menus at the bottom

Trying to position two menus on a webpage can be challenging. One needs to show at the center bottom, while the other should appear in the top right corner. When attempting to achieve this layout, it's important to ensure that both menus are displayed ...

csstwitter-bootstrapbootstrap-4

Looking for assistance with transferring a JavaScript array to my PHP script

Is there an easier way to transfer a JavaScript array to a PHP file? I've seen examples of using AJAX for this task, but I'm wondering if there's a simpler method. Below is a snippet of the code I'm working with: <html> <hea ...

javascriptphphtml

Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

I'm trying to create a form with radio buttons and using Bootstrap 4 to align them horizontally with the .form-check-inline class. However, this causes the input labels to be on the same line as the buttons: <html> <head> <link ...

htmlcssformsbootstrap-4

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using c ...

htmlcsswebkit

Unable to generate dynamic HTML through AJAX request

I made an Ajax API call and received the response in JSON format. I need to create dynamic HTML to display each value in HTML elements. I tried getting the response from the API but couldn't generate the HTML. Can someone assist me with this? Also, I ...

javascriptjqueryhtmlajaxapi

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js