What is the best way to set a background image to 100vh on mobile devices and 50vh on desktop screens?

Currently learning about bootstrap, I am in the process of creating a hero section for my website. My goal is to have the background image in the hero section take up 50% of the webpage on large screens, but switch to 100% on smaller screens.

I suspect the issue may be related to setting the height to 50vh. I am unsure of what to adjust in the bootstrap section to make the height change to 100 when the screen size is small.

Any assistance would be greatly appreciated!

.bg-image {
  width: 100%;
  height: 50vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(to bottom, rgba(118, 118, 121, 0.432), rgba(82, 76, 80, 0.73)), url('https://via.placeholder.com/800/ff0000');
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/emailprotection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c839c81">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="bg-image p-5 text-light ">
  <div class="container text-center pt-5 h-100 ">
    <h1 class="m-5">I Need Help </h1>
    <button class="btn-primary rounded-pill">Book Us</button>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

If you're looking to customize your website based on different screen sizes, media queries are the way to go. Simply open your CSS file and insert the following code snippet at the desired screen size -

@media screen(min-height: the_height_you_desire) {
    .bg-image {
        height: 50vh;
    }
}

For a comprehensive guide on media queries, check out this tutorial - https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer №2

Bootstrap's small (sm) breakpoint kicks in when the screen width is less than 768px. To handle this, you can apply a media query like so...

.bg-image {
    height: 100vh;
    background-color: blue;
}

@media (min-width: 768px) {
    .bg-image {
        height: 50vh;
    }
}

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 method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal

Enable vertical scrolling on the second row of a table while keeping the first row fixed as the table header (CSS)

While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scr ...

javascripthtmlcssace-editor

Position the image on the right side of several lines of text

My webpage contains two div elements: one for displaying multi-line text and the other for showing an image which is positioned to the right of the text. The width of the image is not fixed and can be adjusted using a user-defined parameter. <div> ...

htmlcss

Tips on concealing a div until the value of a specific field surpasses zero

In order to ensure that users focus on the first section of the form before proceeding, I plan to hide the last section until a specific field has a value greater than zero. Check out my HTML code below: <div class="fieldcontainer"> <label>E- ...

javascriptjqueryhtml

How can I place text on top of an image with a filter using Bootstrap?

I am facing a challenge of overlaying text on an image with a tinted background color and opacity. While working with Bootstrap 4, I suspect that some classes might be conflicting with each other. This is my current setup: Index.cshtml: <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

The body background position center does not function properly in Internet Explorer

I'm currently working on a website and facing some issues with the background-position property in CSS. Here is the code snippet that's giving me trouble: body { background-color: Black; background-image: url(images/background_ui.png); backg ...

htmlcssbrowser

Delete the hidden attribute from an HTML element using a JavaScript function

Hey there! I have a question for you. Can you assist me in removing an attribute (Hidden) using an Input type button? Here is the script: Thank you for your help! <input type="button" onclick="myfunction()" value="Test"> <hr> <button id= ...

javascripthtml

Why isn't this button aligning in the center properly?

I'm currently using Bootstrap V5 and trying to center the login button in the div. I've attempted using mx-auto and text-center, but so far, none of them seem to be working. Can anyone point out where I might be going wrong? <div class='c ...

htmlcsstwitter-bootstrapbootstrap-5

Retrieving elements from the DOM based on their class name

Currently utilizing PHP DOM for my project and facing the challenge of retrieving an element within a DOM node with a specific class name. What would be the most effective method to accomplish this? Update: Ultimately decided to switch to using Mechanize ...

phpcssdom

Can the state and city be filled in automatically when the zip code is entered?

I have a form where users can enter their zip code, and based on that input, the corresponding city and state will automatically populate. These three fields are positioned next to each other within the same form. Here is an example of my form: $(' ...

javascriptjqueryhtmltwitter-bootstrapclosest

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

I'm currently working on a project that involves displaying data from a database in a table. To make the data paginated on the client side, I decided to use the bootstrap paginator library available at: Below is the code I'm using: In my header ...

javascriptphpjqueryhtmltwitter-bootstrap

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...

javascripthtmlgoogle-chrome

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

When I submit a form on the view page, I want the form data to be saved in a database table and displayed without refreshing the page. Below is my view code: <div class="col-md-12"> <div class="row"> <div> <table class="table table-s ...

htmljsonajaxdatabasecodeigniter

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

Apologies for the unclear title, I struggled to find the right words. Recently, I delved into the world of 2D game development and was amazed by the capabilities of HTML5's Canvas element. Currently, I am working on my first basic project to grasp th ...

javascripthtmlcanvas

Expand the div width to the specified measurement horizontally

Is there a way to horizontally collapse a div (container) to a specific width that I can adjust, effectively hiding its content? The collapse effect should move towards the left. <div id="container"> <button type="button" id="myButton"> ...

javascriptjquerycss

Animate the border to move to the next list item after it is hovered over

Seeking assistance to animate border-bottom movement in navbar Desiring animation effect for hover event on second li item The code for the navbar is as follows: .top-bar { background:#0d0d0d; width:100%; height:85px; position:fixed; top:0; z-index:99 ...

jqueryhtmlcssanimationjquery-animate

Adjust the width of an item on CSS Grid upon hovering

I recently created a basic CSS grid layout with the following structure... .container { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; } .col1 { padding:20px; background:red; color:white; text-align:center; } .col2 { padding:20px; ...

csscss-grid

Encountering issues with calling a custom directive within another custom directive in AngularJS

I need to implement a custom directive within the template of another custom directive. Here are the code snippets for reference: Issue with Scenario 1 angular.module('myApp') .directive('customOnChange', function () { return { r ...

htmlangularjsangularjs-directive

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss