Full background cover

I have encountered a dilemma while constructing a website. The top image on the site does not expand to fill 100% of the screen size on mobile devices, leaving a blank bar visible. Despite my extensive research and troubleshooting efforts, I have been unable to find a solution.

This layout is not responsive and only caters to mobile screens. Below, you will find a screenshot of the site along with a snippet of the code.

If you wish to visit the website, you can do so by following this link:

VIEW MOBILE WEBSITE IMAGE

body {
  margin: 0 auto;
  padding: 0 auto;
  font-family: 'Noto Sans', sans-serif;
}

h1 {
  font-size: 5.0em;
  color: #efc500;
}

h3 {
  font-size: 2.5em;
  color: #000000;
  font-weight: normal;
  font-style: italic;
}

h4 {
  font-size: 1.5em;
  color: #000000;
  font-weight: normal;
  position: relative;
  bottom: 25px;
}

#bgmain {
  background: url(img/main.jpg) no-repeat;
  background-color: #efc500;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  margin: 0 auto;
  padding: 0 auto;
  width: 100%;
  height: 100%;
}

#barra {
  height: 130px;
  width: 100%;
  background-color: white;
  opacity: 0.8;
  filter: alpha(opacity=80%);
}

#logo {
  float: left;
  margin-left: 5px;
}

#menu ul {
  margin: 0px auto;
  margin-top: 50px;
  list-style: none;
  float: right;
  margin-right: 5px;
}

#menu ul li {
  display: inline;
}

#menu ul li a {
  font-size: 18px;
  color: #efc500;
  font-weight: bold;
  margin-left: 30px;
  text-decoration: none;
}

#menu ul li a:hover {
  border-bottom: 6px solid #efc500;
}

#textomiddle {
  width: 1050px;
  margin: 0 auto;
  margin-top: 150px;
}

#botao {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 350px;
  height: 70px;
  display: block;
  text-align: center;
  margin-bottom: 30px;
  background-color: #FFFFFF;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  opacity: 0.8;
  filter: alpha(opacity=80%);
}

#botao:hover {
  background-color: #FFFFFF;
  opacity: 1;
  filter: alpha(opacity=100%);
}

a.link {
  text-decoration: none;
  display: inline-block;
  color: #efc500;
  font-family: 'Noto Sans', sans-serif;
  margin-top: 17px;
  font-size: 25px;
}
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700" rel="stylesheet">

<div id="bgmain">
  <!-- THIS IS THE MAIN DIV FOR THE BACKGROUND IMAGE-->
  <!-- -->
  <div id="barra">
    <!-- THIS IS THE WHITE BAR ON TOP OF WEBSITE-->
    <div id="logo">
      <!--THIS IS THE LOGO ON TOP LEFT -->
      <img class="logo" src="img/cr6logo.png" alt="logo">
    </div>
    <!-- DIV LOGO END-->
    <nav id="menu">
      <!-- THIS IS THE MENU -->
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">NOSSOS TRABALHOS</a></li>
        <li><a href="#">QUEM SOMOS</a></li>
        <li><a href="#">CONTATO</a></li>
      </ul>
    </nav>
    <!-- MENU END-->
  </div>
  <!-- BARRA END -->
  <div id="textomiddle">
    <!-- This is the DIV that stays in the dima of the banner -->
    <center>
      <h1>SOLUÇÃO COMPLETA EM ARQUITETURA</h1>
    </center>
    <div id="botao">
      <center><a class="link" href="contato.html">FAÇA UM ORÇAMENTO</a></center>
    </div>
  </div>
  <!-- END DIV TEXTOMIDDLE -->
</div>
<!-- END DIV BGMAIN-->

Answer №1

One potential solution is including the following code in your CSS:

@media screen and (min-width: 300px) {
#bgmain {width:1080px;}
}

@media screen and (min-width: 519px) {
#bgmain {width:100%;}
}

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

Steps for placing a figcaption above an image

Does anyone know how to position a figcaption at the bottom of an img so that it appears on top of the image with a transparent background? I've been having trouble making them the same width and getting the figcaption to sit on top of the image. Whe ...

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...

Creating a webpage that automatically clicks on a specific category from a selection using JavaScript and CSS

My latest project involves a page filled with divs, each containing specific text content. Located at the top of the page are buttons that enable filtering of the displayed divs based on their data-category. For instance, I have arranged divs showcasing al ...

Jquery starts functioning properly after the second click and continues to work flawlessly

Despite being a functional script, it only starts working on the second click instead of the first as intended. function change_text() { var button = document.getElementById('toggle_button'); if (button.innerHTML === "Edit") { button.inn ...

Divide HTML content while keeping inner tags intact

Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...

How to style a CSS list and center-align it

My website features a <ul> list with submenus structured like this: <div id="cssmenu"> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class=&ap ...

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration: <div id="PARENT_DIV"> <div id="LEFT_CHILD_DIV"> </div> <div id="RIGHT_CHILD_DIV"> </div> </div> Key features for PARENT_DIV: PARENT_DIV must have a higher z-ind ...

Is there a way to remove the unwanted code ​ from the client side of my website?

Upon inspecting the source code of a webpage, I noticed an odd character ​ appearing before the <script> tag on the client side. Strangely, this mysterious character is not present anywhere in the server-side PHP file. I attempted removing a ...

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

Steps for recognizing and navigating a hyperlink, and subsequently extracting information from a different webpage using BeautifulSoup

If only I could swiftly extract a title from a webpage, exhibit the title, move on to another page by following a link, acquire the title from that new page, and ultimately showcase the second title. The tasks for steps (1) and (4) are essentially identic ...

Error in saving webpage as HTML

I have integrated FileSaver.js into my project to enable users to save web pages as HTML. The code below is triggered when a user clicks on the download button: var originalstr=$.ajax( { type: "GET", url:"url", async: false }).resp ...

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

Wrap text elegantly around your images with Flex Mobile

Looking to develop a component for a Flex Mobile app that will allow me to have text wrapped around an image, similar to what you see in articles or blogs. In HTML, this can be achieved with a tag like: <image align='right' /> associated t ...

Do colors appear differently on various screens?

I've noticed that the background color #1ABC9B appears differently on various monitors when viewing my website. On MAC systems and smart phones, it appears as a lighter shade of green compared to other laptops where it appears darker. What could be ca ...