What is the best way to showcase entire content over a background image on a mobile device?

Hello, I am facing an issue with displaying content on an image in desktop view that does not resize properly when the browser window is resized. The problem lies in setting a background image with full content. Can you please take a look at my images below to better understand what I'm asking for? My background image height is set at 500px. Any help would be greatly appreciated.

Thank you in advance.

html, body
{
  margin: 0;
  padding: 0;
  height: 100%;
}

p{
  color: red;
}
.test-1
{
  background-image:url('images/images-bg.png');
  background-repeat: no-repeat;
  width: 100%;
  height: auto !important;
  background-position: center;

}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test-1">
    <div class="container">
      <div class="row">

        <div class="col-md-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>


         <div class="col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

        </div>



      </div>
    </div>
  </div>

In Desktop There is no issue in this https://i.sstatic.net/uTn5w.png

After resizing

https://i.sstatic.net/953h2.png

csshtml

Answer №1

To modify the appearance of your website, make changes to the CSS file and include the property background-size

.test-1 {
  background-image:url('images/images-bg.png');
  background-size:cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto !important;
  background-position: center;
}

Learn more about utilizing background-size by visiting HERE

Answer №2

Remove the width of 100% and set background-size to cover. Also, delete the HTML and body section. Since you are using Bootstrap, there is no need to define that. 

p {
  color: red;
}

.test-1 {
  background: url(http://www.hollanders.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/i/sil370523644_1_2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test-1">
    <div class="container">
      <div class="row">

        <div class="col-md-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
        </div>

         <div class="col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p>

        </div>



      </div>
    </div>
  </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

React- hiding div with hover effect not functioning as expected

I'm having trouble using the :hover feature in CSS to control the display of one div when hovering over another, it's not functioning as expected. I've successfully implemented this on other elements, but can't seem to get it right in t ...

javascripthtmlcssreactjs

Determine whether the 'required' attribute in HTML5 is being enforced

Is there a simple way to check if a browser enforces the HTML5 required attribute when submitting a form? In other words, ensuring that the form cannot be submitted unless all required fields are filled in. Instead of adding modernizr just for this purpos ...

htmlforms

Access a folder in JavaScript using Flask

I need to specify a directory in a script. $images_dir = '{{url_for('.../pictures')}}'; In my flask application directory structure, it looks like this: Root -wep.py -templates -gallery.html -static -pictures The images are stored ...

javascriptpythonhtmlflask

Ways to obtain jquery object for replaced DOM element

Is there a way to select the new content after using the replaceWith function in my plugin? I want to chain my plugin for the new content. $.fn.customPlugin = function() { this.replaceWith('<div>New Content</div>'); }; So, ideal ...

jqueryhtml

Issue with QT Creator when compiling HTML5 application

Recently, I have set up QT Creator 2.7.0 [Based on Qt 5.0.1 (64 bit)] on my Ubuntu 13.04 system. A problem arose when attempting to create a sample HTML5 Application and run it, resulting in issues during the build process. Below is the output generated: ...

c++htmlqt-creator

On a medium-sized screen, a collapsible button unexpectedly appears amidst the various links

Can anyone help me with sorting out the order of navbar elements? I'm facing an issue where on small screens, the collapse button appears above the links, but on medium screens, it shows up before the last link in the menu. Any suggestions on how to f ...

htmltwitter-bootstrapnavbarbootstrap-5

Loop through the ClearableFileInput field in Django

I am facing a situation where I am working with a model that includes a model.FileField() attribute. When I try to render this in my django template, I simply iterate over the fields like this: {% for field in form.visible_fields %} <div class="for ...

pythonhtmldjangodjango-templates

Take out the username field from the registration form in Woocommerce

Is there a way to eliminate the username section from the registration form on woocommerce? I attempted to remove certain lines from the woocommerce/myaccount/login-form.php <?php if ('no' === get_option( 'woocommerce_registration_gene ...

phphtmlwoocommerce

The click event on a card is not triggering on a cloned item in the Owl Carousel 2

I have implemented owl carousel to showcase products, where each product is displayed on a card with an 'add to cart' button. However, I am facing an issue where the 'add to cart' button on a cloned item does not trigger the click event ...

htmlcssowl-carousel

Display a division upon clicking a button using AngularJS and HTML

Looking to implement a functionality in my HTML page using angularJS. I am currently learning angularJs and experimenting with a feature where clicking on a button will display a specific div (EmployeeInfoDiv) on the webpage. The idea is to fill out some t ...

htmlangularjs

What is the best way to adjust the position of an image background within a container without affecting the container's own placement?

While working on a registration form, I encountered an issue with moving the background image within a container. Despite adding position: relative and using top: with a negative value to shift the image, the entire container moved instead of just the back ...

htmlcssbootstrap-5

Searching for a RegEx expression or jQuery selector that will exclude "external" links in the href attribute

I am using a custom jQuery plugin to enable Ajax loading of page content when certain links are clicked. Implementing this is straightforward with a delegated event like $(document).on('click','a', function(){});. However, I want this ...

javascriptjqueryhtmlregex

Having trouble retrieving data from the fetch database. The login page seems to be stuck in a continuous loop and won't let me

Every time I attempt to log in through: webhost/adminlogin.php, I am redirected back to the same page. Did I forget to add something? Thank you for your assistance. Here is my script: This is what is included in my adminlogin.php file: <?php session ...

phphtmlmysqlmysql-error-1064

The hyperlink function is malfunctioning when used with the embed tag in both Internet Explorer and Chrome browsers

<param id="movie" name="movie" value='<%= Me.ResolveUrl(Me.BannerPath)%>'> <a href='http://<%= BannerTargetUrl%>' target="_blank"> <embed wmode="transparent" src='<%= Me.ResolveUrl( ...

csshtmlhyperlinkcross-browser

Unable to get Bootstrap 4 overflow hidden to function properly within card layouts during animated transitions

In my project, I have an image inside a card layout and I am working on implementing a zoom effect on mouseover. However, I am facing an issue where during the animation, the image overflows from its parent wrapper. After the animation is completed, the ov ...

cssbootstrap-4

What is the best way to expand a footer's height to fill the remaining space on the screen?

Any idea how to achieve this look: Creating a footer that stretches to fill the remaining height of the screen at the bottom of the page. Can CSS make this happen? ...

htmlcsslayout

Bringing in a JavaScript function from a local file into a Node.js

I've been struggling with this issue for a while now and I think it's because of my misunderstanding of how files are linked in node.js. My file structure looks like this: ./main_test.html ./js_test.js ./node_test.js The main_test.html file is ...

javascriptjqueryhtmlnode.js

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

When adding margin-left and margin-right, images do not appear in their designated positions

I have a chart displaying images, which are showing up correctly. However, I am facing an issue when I try to add some spacing to the chart by using margin-left and margin-right. Here is the CSS code I included: #chart1 { margin: 0 auto; ...

javascripthtmlcss

Tips for importing a JavaScript file from a URL and initializing a class in a React component

I am looking to incorporate the PitchPrint app into a React website. They offer a tutorial for vanilla HTML/JS integration here. Following their instructions, I included script tags with links to jQuery and their app file in my index.html file. I then crea ...

javascripthtmlreactjs