Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

Question

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this:

.white-box {
    position: absolute;
    background-color: #FFFFFF;
    color: black;
    width: 50px;
    height: 50px;
    padding: 20px;
}

and inserting HTML tags like this:

<body>
<div class="white-box">
Content
</div>
</body>

I have not been successful in achieving the desired effect on my webpage. My online search results only show variations of what I have already attempted (as shown above). You can see the look I am aiming for here.

Any assistance or guidance would be greatly appreciated! :)

html css

Answer 1

Answer №1

Take a look at this code snippet. When placing an image within a parent element (like in the example where div.image is the parent of div.content), there is no need to use position: absolute.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.image {
  min-height: 100vh;
  background-image: url(https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px;
}

.content {
  background: white;
  padding: 15px;
  border-radius: 3px;
}

<div class="image">
  <div class="content">
    <h1>What is Lorem Ipsum?</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

If you want to display the image on the document body directly, you can simply add the image class to the <body> tag instead of creating a separate container div.

Answer 2

Take a look at this code snippet. When placing an image within a parent element (like in the example where div.image is the parent of div.content), there is no need to use position: absolute.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.image {
  min-height: 100vh;
  background-image: url(https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px;
}

.content {
  background: white;
  padding: 15px;
  border-radius: 3px;
}

<div class="image">
  <div class="content">
    <h1>What is Lorem Ipsum?</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

If you want to display the image on the document body directly, you can simply add the image class to the <body> tag instead of creating a separate container div.

Answer 3

Answer №2

Take some time to carefully examine the website and the CSS that it is utilizing. This can provide you with valuable insights and help enhance your skills (:

One effective strategy could be to apply a background image to the outer div, set the overflow to scroll, and then create a nested div within it with a white background, similar to what is demonstrated on the website.

Answer 4

Take some time to carefully examine the website and the CSS that it is utilizing. This can provide you with valuable insights and help enhance your skills (:

One effective strategy could be to apply a background image to the outer div, set the overflow to scroll, and then create a nested div within it with a white background, similar to what is demonstrated on the website.

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

Answer №1

Answer №2

Similar questions

What causes the variation in default margin between React and traditional HTML?

The $.post method is malfunctioning

The layout of the table is not formatted in a single continuous line

Centering an icon vertically and introducing animation upon hovering over an image

Leverage HTML within JSON for a multilingual website using i18next with Next.js

Is there a way to eliminate unknown white gaps in the content?

Increase the identification of HTML element with jQuery

What circumstances could lead to Chrome's autofill feature ceasing to function?

What is the correct method for handling images in HTML and CSS?

Tips on optimizing a setTimeout script for seamless integration with an HTML form

Footer not sticking to bottom using bootstrap version 5.2.2

Unable to execute project using CodeIgniter

Update the scrollspy navigation in a div with overflow by toggling the active class

Show detailed information in a pop-up window

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

What is the best way to showcase my products in a horizontal line? I am seeking a solution using PHP and Bootstrap to exhibit all the items retrieved

Verify image loading using jQuery

Run javascript code after the page has transitioned

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes