Adjusting the background size for mobile devices

I'm experiencing an issue with my website where the image looks great on desktop but appears zoomed in and terrible on mobile devices. How can I fix this problem?

Using the code snippet below does not seem to work:

background-size:cover;

The background image is applied to a div that has two classes:

.content{
    color: white; 
    font-family: "Another Typewriter"; 
    width:100%; height:1000px;  
    font-size: 300%; 
    padding-left: 15%; 
    padding-right: 15%; 
    padding-top: 10%; 
    text-align: center; 
    background-size: cover;
}

.parallax{
    height: 100%; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
#xyz{background-image: url(URLtoimage);}

The structure of the div container is as follows:

    <div id="xyz" class="parallax content">
    <legend class="text-center content-headline">XYZ</legend>
Some text
    </div>
htmlcssbackgroundresponsive

Answer №1

When utilizing background-attachment: fixed;, keep in mind that it may not function properly on certain mobile browsers. In such cases, you can use a media query to adjust the behavior for smaller screens when scrolling.

.parallax{
   height: 100%; 
   background-attachment: fixed; 
   background-position: center; 
   background-repeat: no-repeat; 
   background-size: cover;
}

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

Answer №2

Consider modifying it to use background-size: contain if the screen width drops below 767px

Answer №3

To achieve a full screen background image effect, you can use the CSS property background-size: 100% 100%. Make sure to check out the snippet view below.

body{
margin:0;
}
.bg-img {
  background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center;
  background-size: 100% 100%;
  min-height: 100vh;
  width: 100%;
}
<div class="bg-img">

</div>

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 open an HTML file with Python without restrictions?

My HTML file is quite large, containing 4,574 words and 57,718 characters. However, when I try to read it using the .read() command, it only displays 3,004 words and 39,248 characters when I export it. Is there a way to read and export it without any lim ...

pythonhtmlfilejupyter-notebook

Content overflowing into a different divison

I am facing a problem with an absolutely positioned DIV. It is placed beside an image, and below it, there is another DIV. Everything looks good in fullscreen mode, but when I resize my browser window, the text spills into the lower DIV. What I really want ...

csshtml

Vue.js component unable to validate HTML input patterns

Attempting to create HTML forms with the 'pattern' input attribute has been an interesting challenge for me. When implementing this through Vue.js components, I encountered some strange behavior. Check out this fiddle to see it in action. Vue.co ...

javascripthtmlvue.jsvuejs2vue-component

Merge floating and absolute positioning techniques

Creating a calendar exhibiting all events in one div requires precise positioning based on the values of top and height. Let me demonstrate this concept. In the image below, both 6am events are aligned vertically. This alignment issue can be resolved by u ...

javascripthtmlcsscss-floatabsolute

What is the best way to include a Java variable within an HTML tag?

I need help with using a variable that contains a URL. String url = getEnvironment().getProperty(CUSTOMER_SIGN_IN_PAGE_URL); How can I correctly incorporate the value of the url variable into the following code snippet? String customerMessage = new Stri ...

javahtmlurlbutton

The eot file converted online is not functioning as expected

I have tried converting the 'Helvetica Neue Bold' ttf to eot online, but unfortunately it does not seem to work in IE8 and below. The font face I used is as follows: @font-face { font-family: 'HelveticaNeueBold'; src: url(&apo ...

htmlcssfont-face

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

javascripthtmlcsssass

What is the best way to deactivate a button when a certain input field is left blank?

I'm having trouble figuring out how to deactivate a button when specific input fields are empty, while others can remain optional for the process. In my course, we were taught to disable the button until all inputs are valid, so I'm a bit confus ...

javascripthtmlreactjsbuttondisable

I am experiencing an issue with my Angular directive where the button click does not

Check out this page for guidance on adding a div with a button click in AngularJS: How to add div with a button click in angularJs I attempted to create an angular directive that should add a div to my HTML page when a button is clicked. However, upon cli ...

javascriptjqueryhtmlangularjs

What are the benefits of keeping PHP separate from HTML?

As I am relatively new to the world of programming, I have been learning how to separate PHP from HTML. However, I am curious to know if there is a difference between executing the following code: <?php $rand="I love apples" ?> <h1>This is a t ...

phphtml

Steps to create a toggle feature for the FAQ accordion

I am currently working on creating an interactive FAQ accordion with specific features in mind: 1- Only one question and answer visible at a time (I have achieved this) 2- When toggling the open question, it should close automatically (having trouble with ...

javascripthtmlcss

Optimizing media queries with Angular: A comprehensive guide

I am currently using NgZone to handle media queries in my Angular project. I am curious if there is a more efficient way to achieve this. import { NgZone } from '@angular/core'; const SMALL_WIDTH_BREAKPOINT = 840; export class AppComponent im ...

angularmedia-queriesresponsive

Incorporate a distinct identifier for every menu item within the Material UI TablePagination

Can a unique identifier be assigned to each menu item generated using the <TablePagination> component? I would like to add a specific ID (e.g., id="menu_item_0", id="menu_item_1" & id="menu_item_2") to the menu item ...

javascripthtmlreactjsmaterial-uiaccessibility

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs

Highlighting Selected Nodes in Drupal Views

Seeking Help with Drupal: Is there a way to utilize Views to highlight the current selected node? For example: I have a list of articles under a heading: 2009 Articles Dog Training Cat Cleaning Snake Wrangling The 3 articles are displayed in a view ...

cssdrupalmenuview

Perform calculations for product and sum when button is clicked

I received the following task for an assignment: Develop 3 functions along with a form. The first function should execute upon button press and utilize the other 2 functions. These two functions are supposed to compute the sum of two numbers and the ...

javascripthtml

Using " " to split a name into two lines is not being recognized

My issue involves the display of tab names in two lines within multiple tabs. You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here ...

javascripthtml

Prevent Scrollbars in a Div

At the bottom of my website, there is a carousel slider that moves left and right when I scroll over it. Is there a way to disable this movement? If anyone has any suggestions on how to disable this feature, I would greatly appreciate it. ...

javascripthtmlcss

Overflow of content from `div` on top of the window

I have a section with tabs, each tab displaying different content. One of those tabs contains a table taller than the screen size. When I open it, the section stretches and overflows from the top, extending beyond the window. Despite having overflow:auto s ...

htmlcssbootstrap-4

Unable to define a range for the hr element using the nth-of-type selector

Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below? hr:nth-of-type(n+1):nth-of-type(-n+3){ background:red; } <!DOCTYPE html> <html> <head> </head> <body> <hr /> <p>T ...

htmlcss