Ensure the background image is optimized for viewing on screens of any size

I am facing an issue with an image on my website that serves as the background for some elements. The image is wider than it is tall, causing problems for users viewing the site on phones. Is there a way to cut off the sides of the image and ensure it fits properly on all screen sizes? I have tried using CSS within the Bootstrap framework and style tags, including overflow, but it hasn't worked so far.

Below is the code snippet:

<div class="text-white" style="
background-image: url('/static/ghc_building_darkened.jpg');
background-position: 50%;
background-repeat: no-repeat;
height: 100vh;
overflow: auto;
width: auto;
background-size: 100%;
">
  code omitted here.
</div>

Answer â„–1

Upgrade your CSS elements to the following:

background-image: url('/static/skyline_building.jpg'); 
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
height: 90vh;
width: 100%;
overflow-y: hidden;

Answer â„–2

To achieve the desired image display, simply modify the background-size property to either contain or cover. The contain option will resize the image so that its longest dimension fits within the container, while cover will adjust the image so that its shortest dimension fills the entire space.

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

Enhance user experience with dynamic color changes in JavaScript

Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs

When attempting to upload files to a specific channel, they always end up being uploaded to the first tab or channel. I've been using useRef to try and fix this issue, but I'm not sure what exactly is missing. By "tab," I am referring to the tab ...

What is the best way to remove <a> tags from an XML document?

I'm dealing with <a> tags within an XML file and I need to remove only the <a> tags. For instance: <test>This is a line with <a name="idp173968"></a> tags in it</test> I am unable to use str_replace to replace t ...

To make table headers remain stationary as the data scrolls with JavaScript

When using Explorer, I was able to fix the "thead" part of my table while scrolling by using CSS expressions. The following CSS code snippet showcases how it's done: .standardTable thead tr { position: relative; top: expression(offsetParent.scrollTo ...

Issue with color display inconsistency in webgrid across various segments

https://i.sstatic.net/UW17M.png My goal is to display section status colors in a webgrid and divide them percentage-wise, but I am facing issues with some of the rows. Here is the cshtml script for the webgrid section status: webGrid.Column(header: "Sec ...

Conceal Bootstrap 5 Modal until the .show() function is complete

When using Bootstrap 5, calling Modal.hide() will not have an immediate effect unless it is triggered after the modal has completed the fade/transition effect. To make the hide method work instantly, you can remove the fade class from the modal. Is there ...

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

PHP script redirects to its own URL successfully, but the functionality fails when triggered by CRON

I am facing an issue with a program that calls itself iteratively. redirect($_SERVER["PHP_SELF"]); function redirect($url,$seconds=0) { $html="<html><head><meta http-equiv='refresh' content='$seconds; URL=$url'>< ...

Customizing the Steps Component in Ant Design

Currently, I am utilizing the Steps component from Ant Design. My goal is to enhance its functionality by adding additional components, like a button placed next to each step's description to make it more interactive. Furthermore, I am looking to inc ...

Struggling to fix errors within a nested div element?

I'm currently utilizing AngularJS to perform basic form validation. Below is the current code snippet: <form name="myForm" id="form_id" method="post" novalidate> <div class="form-group"> <label for="myField_input" class="c ...

"Exploring the process of implementing a fixed method POST in Angular 5

When developing an application for Portal, I encountered an issue where a newly created role is not displayed without refreshing the browser. How can I ensure that the added element is directly displayed in the table without needing to refresh the browser? ...

Ensure that images in a browser maintain their proportions without distortion on all device screens and orientations by setting their height and width to match the

I'm working on a slideshow component in React and I want the images to dynamically adjust to fit any device screen size and orientation. The goal is for the image to resize proportionally until it reaches either the top and bottom edges or left and ri ...

What is the best method for incorporating success icons into my website with vue.js?

Hey everyone, please excuse my lack of expertise as I am a beginner in this field. I'm trying to incorporate success icons into my website using bootstrap or similar tools, but I'm unsure of how to implement the if statement below. If anyone co ...

Tips for positioning divs on top of an image with Twitter Bootstrap

I'm having an issue with displaying an image and dividing it using bootstrap div columns. The problem is that the image is overlapping the divs, making it impossible to click or attach jQuery events to it. Here is the code I am currently using: #view ...

Getting 100% height on floated neighboring divs: Tips and tricks

​<div id='container'> <div class='left'></div> <div class='right'></div> <div class='clear'></div> </div>​​​​​​​​​​​​​​​​â ...

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

The hyperlink for making phone calls appears twice on an Android phone

When you click on the number, it will be displayed twice in the phone screen like this... 12345678910,12345678910 ...instead of just once... 12345678910 Take a look at the code snippet below: {#if order.salesRep} <div class="info"> ...

Tips on incorporating a color picker in HTML using jQuery

Looking to implement an HTML color picker with the help of JQuery. Wondering if there is a simpler method to do this without relying on external JQuery libraries? Experimented with <input type="color"> but encountered issues that prevented it from ...

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

I'm currently working on a side menu that drops down when hovering over Section One within the <a> tag. I need some guidance on how to make the JavaScript code continuously check the state of the list after a set amount of time in order to autom ...