Responsive background image not displaying properly

The developer site can be found at http://www.clhdesigns.com/cliwork/wintermeresod/about.php

I am encountering an issue where the background image on the home page scales perfectly, but on the about us page it does not scale at all. I am seeking a solution where the image will scale down to 100%. Below is the code that I currently have:

<div id="main" class="about">
<div class="inner">
<div class="welcome_intro2">
  <h1>Growing Top Quality Sod</h1>
  <h2>for over 25 years</h2>
</div>

Below is the corresponding CSS:

#main { float:left; width:100%;   padding:1em 0 3em 0; color:#666;}

.about {
background: url("../images/banner3010.jpg") no-repeat;
height:582px;
width:100%;
}

The desired outcome is to maintain the height of the image as it appears on desktop screens, while ensuring that it remains 100% responsive. Any suggestions on how to achieve this?

htmlcss

Answer №1

Have a glance.

.information {
background: url("../images/banner3010.jpg") no-repeat 50% 50%;
height:582px;
}

Answer №2

Here's a link to a SCREENSHOT demonstrating how it functions. By utilizing the same code as the one containing the image on the initial page, I ensured its responsiveness. See the code snippet below:

.about {
    background: url("../images/banner3010.jpg") center center no-repeat;
    height:582px;
}

To adjust the image height for tablets and mobile phones, consider using @media queries:

@media screen and (max-width: 768px) {
   .about {
        height:300px; /*adjust the height as needed*/
    }
}

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

What is the best way to iterate over my JSON data using JavaScript in order to dynamically generate cards on my HTML page?

var data = [ { "name":"john", "description":"im 22", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c7d7e7f0c2b212d2520622f">[email protected]</a>" }, { "name":"jessie", ...

javascriptcssjson

Excessive text in the input text area causing overflow

I am experiencing a minor issue with the primefaces inputTextArea. Whenever the text exceeds the assigned panel height, it overflows behind the next panel. Interestingly, clicking into the textarea resolves the problem temporarily, but on initial page view ...

htmleclipsejsfprimefacestextarea

What is the process for allowing right-click to open in a new tab, while left-clicking redirects to a new page in the current tab?

In my project, I have implemented a multi-page form for users to input information. The left side menu contains items that allow users to switch between different pages while filling out the form. Currently, clicking on any of these items redirects the use ...

htmlcssdjangohttp-redirect

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

htmlcssjspformatting

Include a scrollbar within a div element nested inside a table cell

index.html <div id="wrapper"> words go here, many of them </div> style.css #wrapper { height: 100%; width: 200px; overflow: auto; } I have been struggling to display the scroll bar on my page, and this is what I am currently exp ...

csshtmlhtml-table

Determining in Angular 8 whether a value has been altered by a user or by a method call

Within my select element, the value is currently being assigned through an ngOnInit call. Here is an example of the HTML code: <select name="duration" [(ngModel)]="exercisePlan.duration" (ngModelChange)="onChange($event)"> <option *ngFor="l ...

htmlangulartypescript

Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file can ...

pythoncsshttp-status-code-404

Tips for applying an active class to buttons using ng-click?

Here is the HTML code for the buttons. The taskfilter is the filter that controls how the buttons work when clicked and the class name is 'sel' <a class="clear-completed" ng-click="taskfilter = 1" ng-class="{'sel':enabled}"> &l ...

javascripthtmlangularjs

What is the specified height for the AppBar and Toolbar components in Material-UI?

I'm trying to figure out the exact height being used in this scenario: <AppBar position="static"> <Toolbar> because I'll need that information for a calculation in another component. My current assumption is that it's 64px, b ...

cssmaterial-ui

I am experiencing an issue on my webpage where clicking on the login button does not seem

My website code includes: <form method="POST" action="{% url 'lawyerdash' %}"> {% csrf_token %} Username<input type="text" name="username"><br> Password<input type="password" name="password" ><br> & ...

htmldjango

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

I am in the process of developing an ID lookup form using Angular. My goal is to generate multiple formGroups within the same HTML file based on an array of values I have, all while keeping my code DRY (Don't Repeat Yourself). Each formGroup will be l ...

javascripthtmlangulartypescript

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

After successfully converting my data to text/csv, I can easily download the file in Chrome. However, when attempting to do so in Safari on an iPad or Mac, it opens a tab with the name "unknown" or "Untitled". The code snippet I am using for this is as fol ...

javascriptangularjshtmldownloadsafari

How to Center a DIV both Vertically and Horizontally with CSS Positioning?

I'm currently working on a webpage layout where I want to have a main div centered horizontally with three smaller divs inside, aligned both vertically and horizontally with equal spacing. I tried using margin: auto on an empty div to center it in the ...

htmlcss

Enhance each category changing with jQuery page transitions

Is there a way to add page transitions based on category names and quantities in PHP? For example, when clicking on the "office" category, can a popup overlay be displayed with the category name and quantity while the content loads? The focus is on creat ...

javascriptphpjquerycss

Include an additional Div tag in the existing row

I've been attempting to include an additional div, but it consistently appears as the second row.. I want all of them to be on the same row and aligned with each other. Here is the HTML code: <div class="content-grids"> <div clas ...

htmlcsswidthdivision

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

cssangularjstwitter-bootstrapcursor

Create a layout with three columns, each containing four list items

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

htmlcss

The CSS styles are not being applied correctly in the HTML document

I have this snippet in my .css file: .attachment-label { font-size: 10px; font-style: italic; color: rgba(0,0,0,.5); } When I try to use it in my HTML like this: <div class="card-body"> <span class=" ...

htmlcss

JavaScript drag functionality is jerky on iPads, not seamless

I am currently attempting to implement a feature where I can drag a div (#drag) within its parent container (#container) using only pure JavaScript. This functionality is specifically required to work on iPad devices only. After writing a script that func ...

javascripthtmlcssipad