Set the image to be positioned absolutely on the entire screen

I'm trying to add a background image to the center of my webpage that spans the entire width of the browser.

After finishing my page layout, I realized I needed to jazz it up by placing an image in the background. But, my attempt to center it and make it bigger than the screen left me scratching my head.

If you're as lost as I was, check out this Fiddle I put together.

The goal is to position a background image on the wrapper while centering it between two divs, regardless of its size in relation to the screen.

<div class="wrapper">
    <div class="container">
        <div class="left">
           Left content
        </div><div class="right">
             right content
        </div>
    </div>
</div>

Hopefully, this setup now makes sense.

htmlcss

Answer №1

For the background image to show on the .wrapper, you must remove the background from the .container. Additionally, adjust the background position using three key properties:

  • background-image: url() - Used to insert the image.
  • background-size: cover - Ensures the background covers the entire area.
  • background-image: center - Positions the image at the center of the container.

Check out the code snippet below:

.wrapper{
  margin: 0 auto 0 auto;
  max-width: 100%;
  text-align: left;
  background-image: url(http://placehold.it/200x200);
  background-size: cover;
  background-position: center;
}

.container{
  position: relative;
  max-width: 1280px;
  height: 260px;
  /* background: #ffffff; */
  margin: 0 auto;
}

.left{
  position:relative;
  display:inline-block;
  width:50%;
  border:1px solid #000;
}
  
.right{
  position:relative;
  display:inline-block;
  width:49%;
  border:1px solid #000;
}
<div class="wrapper">
    <div class="container">
        <div class="left">Left Content</div><div class="right">Right Content</div>
    </div>
</div>

Hope this explanation is clear!

Answer №2

If you're looking to solve this issue, you can visit the following link to find a solution: here. The key is to remove the white background from the .container element to prevent it from covering the background of the .wrapper element. Once done, you can then set the background-size property to cover for the .wrapper element, ensuring that it covers the entire area of that div. In the example provided, a random background image is used.

.wrapper{
  margin: 0 auto 0 auto;
  max-width: 100%;
  text-align: left;
  background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
  background-size: cover;
}

Answer №3

I wasn't exactly sure about your request, but I have made updates to your fiddle. Click here to view the changes

If I understand correctly, you wanted a white background behind the boxes, center alignment for the white box, and an image on the wrapper. Is that correct?

I have made those adjustments for you. Feel free to take a look and let me know what you think!

Take a look at the updated fiddle

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

Navigation bar at the bottom using Twitter Bootstrap 3 that includes a combination of full-width and regular containers

I've been tasked with recreating the designer's layout using Bootstrap. The desired layout consists of two full-width bars and a fixed container for the main content and footer menu. I have successfully implemented this layout, including respons ...

htmlcsstwitter-bootstrap

Unable to set SimpleLazyObject as the value for the CustomUser model in Django

Hey everyone, I ran into an issue with my blogpost. Every time I try to add a new one, I encounter this error: ValueError at /pages/blog/new/ Cannot assign "<SimpleLazyObject: <CustomUser: <a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

pythonhtmlcssdjango

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

Implementing Enter key functionality to add items to a Todo list using pure DOM manipulation

var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...

javascripthtmlcss

Utilizing JavaScript to create multiple HTML tables from JSON data

Is it necessary to create separate tables in HTML for each set of JSON data when all tables have the same number of columns (2 columns)? I am looking to minimize the JavaScript function that displays the table with the current JSON data. Can I use one tabl ...

javascripthtmljson

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground

Submitting a HTML form with a select element that will pass comma-separated values in the URL query

My HTML form includes a dropdown menu. <form method="get"> <select name="category[]" multiple class="form-control"> <option value="1">First Value</option> <option value= ...

htmljqueryformshttp-redirectdrop-down-menu

What is the best way to fill the dropdown options in every row of a data table?

This HTML snippet displays a data table with test data and corresponding dropdown options. <tr> <th> Test Data </th> <th> Test Data ...

javascripthtmlangulartypescriptprimeng

I need to update the class definition of a navigation menu item that contains an "a" tag with the class "section-link". How can I dynamically add the class "popover-link-a" to this definition using JavaScript?

If the grid in the body contains no data, then I want to display a pop-up message on the menu li element. This pop-up is triggered by adding the class popover-link-a. The current setup looks like this: <li id="tecrube" runat="server" ...

javascripthtmljqueryasp.net

Creating subpages using IDs can be accomplished by following these simple steps

Currently, I am in the process of developing a website that contains a plethora of information, specifically news articles. Each news article on my site features an introduction and a header. Upon clicking on a particular news article, the full content is ...

phpjavascriptjqueryhtml

jQuery technique for loading images

Here is the issue at hand: I am attempting to utilize jQuery to accelerate image loading on my webpage. To achieve this, I have a code snippet specifying an initial image that should be replaced with another image once the page has finished loading. < ...

javascriptjqueryhtml

Save your canvas image as a file and attempt to force a download, only to be met with a failure to

Is there a way to save a canvas as an image file and allow users to choose the format (png or jpg) for download without saving the file on the server? Here's what I have tried: JavaScript Code: $.ajax( { type : "POST", url : "../php/downloa ...

phpajaxhtmlcanvasforce-download

The content of InnerHtml does not appear on the screen

I am currently building a web project using HTML and Bootstrap, however, I am facing an issue where my content is not showing up in the browser. Below is the code snippet that I am working with: let str = "" for (let item of r.articles) { s ...

javascripthtmlexpressbootstrap-5web3js

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements? Here is an example: HTML: <div id="tree"> <ul> <li>apple</li> <li>banana</l ...

javascriptjqueryhtmlcss

Tips for creating a full-length sidebar below the top navigation using Bootstrap 4

Recently started using Bootstrap and decided to work with the alpha version of Bootstrap 4 to create a website for my home network. My main concern is with the sidebar, as I want it to cover the entire left side of the page, starting just below the top na ...

htmlcssbootstrap-4

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

Utilizing a button's "data-" attribute to trigger a specific JavaScript function

I am trying to assign data to my buttons in a way that makes it accessible when clicked. While I can easily use JSON in a button's data attribute with a string as the key value, I am struggling to set the values to be a function instead. What I want ...

javascriptjqueryhtmljsoncustom-data-attribute

a div sandwiched between two others

I am trying to nest a <div> within another <div> and center it within the parent. Here is my current approach: <div id="redthing"> <div id="whitebox" > </div> </div> The CSS code I am using is as follows: #red ...

csshtmlmargin

Applying CSS transition delays to multiple images

I'm having trouble implementing a transition delay in my CSS. I've tried adding it in various places but it doesn't seem to be working as expected. This is my CSS: .imageBox { position: relative; float: left; transition ...

htmlcss

Beautiful ExpressionChangedAfterItHasBeenCheckedError

I need your help Input field where I can enter a Student email or IAM, which will be added to a string array List displaying all the students I have added, using a for loop as shown below Delete button to remove a student from the array The list has a sp ...

cssangulartypescript