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 navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

Unable to assign the value of 'innerHTML' to a null property during an AJAX request

I have searched through numerous articles on this site, but I haven't been able to find the solution I'm looking for. Every time I click a cell in my custom div table, I receive the frustrating message "Cannot set property 'innerHTML' ...

javascriptphphtmlajax

Tips for inserting an HTML element within an exported constant

I need help formatting an email hyperlink within a big block of text. Here is the code snippet: const myEmail = '<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4b564f435e424b6e4b564f435e424b004d41 ...

htmlreactjstypescript

Tips for maintaining consistent styles in CSS for multiple websites

I am currently working on developing a customizable chatbot widget using react. The goal is to create a chatbot widget that can be easily integrated into any website, similar to the functionality of rasa-webchat. During testing on some websites, I encount ...

htmlcssreactjsmaterial-ui

PHP: Issues with displaying data from a SELECT * FROM query in tables

My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...

phphtmlcss

Creating a copy of a div using jQuery's Clone method

I need help figuring out how to clone a div without copying its value. I've attempted various methods, but they all seem to include the value in the cloned element. This is the jQuery function I am currently using: $('#add_more').click(fu ...

javascriptjqueryhtmlcss

Ways to perfectly align three images side by side using CSS

I am trying to align 3 pictures horizontally, but they keep ending up on separate lines. Here is the code I have been using: HTML <section class="features"> <figure> <img src="....jpg" alt="..."> ...

htmlcssimageflexboxinline

Dynamic manipulation of classes based on user attributes

One thing I've noticed is that certain WordPress themes, like 'Thematic', include user-specific classes in the body element to avoid using CSS browser hacks. For example: wordpress y2010 m02 d26 h05 home singular slug-home page pageid-94 pa ...

phpjavascriptjquerycssdynamic

Assist the floats to "ascend" and occupy the available space

The screenshot showcases boxes that have been styled with "float: left". Is there a way to make these boxes float to the first available space in a column? For example, can we move the Music Nation box to the location indicated by the red arrow in the ima ...

csscss-float

Tips for preventing the state of a checkbox from being saved in the browsing history

I have implemented a mobile menu using a checkbox, with the following simplified code: input, ul { display: none; } label { cursor: pointer; } input:checked ~ ul { display: block; } <input type="checkbox" id="toggle-menu" /> <label for="t ...

htmlcss

jQuery Ajax allows scripts to be contained within a page, even if the page itself is empty

Utilizing jQuery ajax to display an HTML page that includes javascript functions, here is my code: function ChartBook() { $.ajax({ url: '/Charts/ChartBook', dataType: 'html', id: 1, ...

javascriptjqueryhtmlajax

Is it possible for us to customize the angular material chip design to be in a rectangular shape

I recently implemented angular material chips as tags, but I was wondering if it's possible to customize the default circular design to a rectangle using CSS? ...

cssangularangular-material

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. ...

javascripthtmlcss

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

I have recently made some updates to our website's dropdown menu, expanding the results displayed. However, I would like the dropdown contents to fit within the width of our page. I have tried adjusting the CSS with limited success: .menu > ul > ...

htmljquerycss

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

htmlcsstext

Customize the color of a Bootstrap btn-group

Is there a way to modify the background color of the active or selected button within a button group? <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" c ...

htmlcsstwitter-bootstrap

Some devices experiencing website update issues while others are successful

My website is functioning properly on my laptop and phone, but not on my school iPad (managed by the district). I have already cleared the cache, but the site does not update. It was working fine earlier, and I need to present it next Monday. Please help a ...

htmlcss

I am looking to insert a jQuery value or variable into the plugin options

How can I insert a jQuery value or variable into plugin options? This is my current script: $(document).ready(function() { // var bannerheight = 580; if ($(window).width() < 2100) { var bannerheight = 410; var opts = JSON.parse( ...

javascriptjqueryhtmljquery-pluginsrevolution-slider

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar. If you would like to see the page, click this link: On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning a ...

javascriptjqueryhtmlcss