Background cover remains fixed but may appear more magnified on mobile devices

I have a website with a fixed background cover located at:

On each page, there is a large header image, but on smaller devices like mobiles, the cover image appears too big. I am looking to scale it down for mobile devices.

Here is the code that I'm currently using:

#takelessons {
    background: url(../img/portfolio/takelessons-intro.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
}

If you have any suggestions or tips on how to adjust the size of the cover image for mobile devices, I would greatly appreciate it!

htmlcssmobileinterface

Answer №1

To resolve my issue, I decided to restrict the functionality to only accommodate large tablet screen sizes.

@media screen and (max-width: 992px) {
    #parallax {
        background-attachment: scroll;
    }
}

Answer №2

Here is the solution for you :)

Simply include the following in your CSS...

background-size:cover;
width:100%;

Let me know if this works for you!

Answer №3

Give this a shot

background image: url(image.format) center no-repeat fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% auto;

Answer №4

After experimenting, I discovered that when utilizing background-size: cover along with background-attachment: fixed, it leads to a specific problem on mobile devices.

The issue was resolved by switching from 'fixed' to 'scroll' in the code.

Since I incorporated a parallax effect using JavaScript, I was able to adjust the formula to accommodate the changes in background behavior.

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

Ensure that column headers remain fixed when scrolling side to side

I'm trying to adjust the column headers so that I can scroll horizontally while keeping the headers visible. I've attempted the following changes but haven't been successful. In the screenshots provided, you can see that when I scroll up or ...

htmlcssangular

The art of browser manipulation: Javascript positioning

My issue revolves around the positioning of a Hello Bar. The CSS is set to relative, which has caused the entire site to be pushed down. To address this issue, I have implemented the following JavaScript function: <script language="javascript"> $( ...

javascriptjquerycss

Server unable to start and error message shown on command prompt

I am having trouble opening the webpage from the code hosted on Github. When I try to run the server, I encounter errors that are displayed in the command prompt as shown below: Code link: https://github.com/mschwarzmueller/nodejs-basics-tutorial/tree/mas ...

javascripthtmlnode.jsmongodbreactjs

When I bind the submit event to my form, the form is automatically submitted using the default handler

This issue occurs in both IE and Firefox, but not in Chrome. Here is the form structure: <form id="enviaEmail" method="post"> <label for="nombre">Nombre</label> <input id="nombre" type="text" name="nom ...

javascriptjqueryhtmlajaxforms

What is the best way to align the logo image in the center of the header vertically?

I am trying to vertically center my logo, but I have not been successful with using margin: auto or margin: center. Here is what I have tried so far: ・text-align: center; ・margin: auto; ・margin: center: ・navbar-brand-center The logo currently app ...

htmlcssvue.js

Mobile Devices Image Gallery Optimization

Just starting out with HTML, CSS, Bootstrap, and JavaScript and I've put together this gallery. It looks good, but I need to optimize it for mobile devices and smaller screens. Any suggestions on what I should change? For items #myImg4, #myImg5, #myI ...

javascripthtmlcssbootstrap-4

The drop-down menu in the navbar is always positioned above any fixed elements on the page

I am facing an issue with a drop down menu in a nav-bar. The problem occurs when the drop down menu goes behind a fixed-position div below the nav-bar. I have tried using z-index but it doesn't seem to be working. Setting the position of the dropdown ...

htmlcsstwitter-bootstrap

Prevent overlapping of range sliders in HTML and CSS

I have designed a range slider with two buttons, but they are overlapping each other. I want to ensure that they do not cross over one another - where the value of the first button should be equal to the minimum value of the second button, and the maximum ...

htmlcssangularfrontend

Leveraging React.memo alongside hooks for managing controlled input components

I've created a custom React hook to handle form functionality, inspired by Formik but with basic features. function useFormValidation(initialState, validate) { const [values, setValues] = React.useState(initialState); const [errors, setErrors] = ...

javascripthtmlreactjsreact-hooks

Utilizing CSS to dynamically update the nth-child selector

I've created an image gallery with a 2-column layout, allowing for full-width images to be interspersed between the columns. To see an example of this, check out my Codepen: <div class="gallery"> <img src="http://nosrc.io/200x200"> ...

csscss-selectors

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

javascripthtmlnode.jsexpresspassport.js

Creating sequential numbers using jQuery

Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...

javascriptjqueryhtmlcss

Decrease the rate of scrolling

Hey there, I'm having trouble finding information on this topic. I understand that it's not ideal to alter the scroll speed of a website, but I need to do so for a site that is more like a game than a typical website. Is there anyone who can gu ...

jqueryhtmlcssscroll

Store data collected from a form within a Bootstrap modal into a PHP session variable

My goal is to utilize Bootstrap's modal component to collect user information and save it into a session. The form within the modal is designed for users to input their first name, last name, and email address. Upon clicking submit, this information ...

phphtmlsessionmodal-dialog

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

css

Error message appears when attempting to display a variable in HTML without defining it

Python if($count == 1) { session_register("username"); $_SESSION['username'] = $username; header("location: ../home"); }else { $error = "Your Login Name or Password is invalid"; } CSS -- line 43 <?php echo "<p cl ...

phphtmlmysqlecho

Issue with resetting column widths in Datatables

I am trying to set the maximum width for a datatable with a fixed header using JavaScript. Below is the JavaScript code snippet I am using: var oTable = $('#example').DataTable( { "sScrollY": 200, ...

jqueryhtmlcssdatatables

Stylish Responsive Design with HTML and CSS Centering

I am tasked with creating a landing page that features an image at the top with text, followed by a couple of videos and a 2-pixel strip line image that must stay at the bottom. <html> ... <body> <img src="topimage.png" alt="" /> <t ...

htmlcss

What is the process for importing .woff fonts onto my website?

I'm having an issue with @font-face on my website. I keep getting a 404 error for the .woff file even though the fonts are located at the root. I've checked but can't seem to find the fonts. Here's my font CSS file, can anyone spot the ...

htmlcss.netfontswebfonts

Adding an hour to a time value with preg_replace: A step-by-step guide

On my page, I display times like this: 10:00am. Now, I'm looking to add one hour to each of these displayed times. I've managed to create a regular expression that helps locate the times in the format required, but I'm stuck on what steps to ...

phphtmlregex