As someone new to coding, I have a question for you all. This is the first time I haven't been able to find an answer online, perhaps due to my inability to effectively describe it. However, I have posted a picture to help illustrate my issue.
Thank you in advance!
To customize the appearance of an element, you can specify a background using the following code: background-color: rgba(0,0,0,0.5); Make sure to note the value 0.5 in the color declaration—it ranges from 0 to 1. The higher the number, the darker the shade.
html{
width:100%,height:100%;
}
body{
background-image: url(https://i.sstatic.net/wwy2w.jpg);
height:100%;
width:100%;
background-size:cover;
}
#black-box{
position:absolute;
background-color:black;
opacity:0.5;
width:50%;
top:10%;
left:10%;
height:50%;
}<body>
<div id="black-box"></div>
</body>To achieve a background image, you will first need to create a div for the background image. Then, another div should be added to vertically align the content similar to your example, followed by a third div to hold the content.
HTML:
<div class="background">
<div class="background-module">
<div class="background-info">
<h1>Greetings</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non imperdiet enim. Aenean eget dolor in risus aliquam pellentesque. Ut porta nec ex vel tincidunt. Maecenas varius accumsan posuere. Donec non blandit ipsum. Duis vel eros nunc. Donec aliquam ac ipsum et ultrices.</p>
<form>
<input type="email" />
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
CSS:
.background {
background:url("https://example.com/background.jpg") no-repeat center top;
background-size: cover;
height:800px; /* adjust as needed */
display:table; /* necessary for vertical alignment */
width:100%;
}
.background-module {
display:table-cell; /* necessary for vertical alignment */
vertical-align:middle; /* necessary for vertical alignment */
}
.background-info {
background:rgba(0, 0, 0, 0.5); /* creates opacity effect like in your example */
padding: 15px;
text-align: center;
width:50%;
margin:0 auto;
}
Check out this working fiddle for reference > https://jsfiddle.net/abc123/
If you're looking to create something similar, check out this example
Here's the HTML code snippet:
<div class="wrapper">
<div class="box">
<div class="content-block">
<p>Your Content Here</p>
<div class="overlay-effect"></div>
</div>
</div>
</div>
And here's the corresponding CSS:
.wrapper {
width:1200px;
background: white url(http://lorempixel.com/1200/1000/nature/2/) no-repeat center;
height: 300px;
padding: 40px 0;
margin : 10px auto;
}
.content-block {
display:block;
width: 60%;
height: 150px;
background:transparent;
margin: 0 auto;
position:relative;
}
.overlay-effect {
width:100%;
height:150px;
background: rgba(0,0,0,0.6);
position:absolute;
left:0;
top:0;
z-index: 0;
}
p {
padding: 15px;
color: #FFFFFF;
position: relative;
z-index: 1;
}
Just getting started with SCSS and trying to maintain high quality cover images on my website. The CSS seems to be working fine, but the SCSS is giving me some trouble. SCSS #page-login-index { @media screen and (min-aspect-ratio: 5/4) { background-c ...
I came across a tutorial on w3school (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol), which demonstrates collapsible content hidden by default. The code snippet from the link is provided below. Can someone assist me in cha ...
Before I dive into this, I want to acknowledge that I understand my coding practices for this project are not up to par. I have been under time constraints to finish this project quickly (as a favor) and plan to address these issues at a later time. On my ...
Despite having all the static files in place, only the plain HTML loads without any styles for some unknown reason. I've attempted using collectstatic and even setting up a new project, but to no avail. STATIC_URL is also properly specified along with ...
Currently, I am exploring different methods to scale HTML elements for a large screen, such as a kiosk. I have been using CSS3 scale() to achieve a relatively cross-browser scale, but I am curious if there are better options available. My main focus is on ...
I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...
Is there a way to create a white space around the background color of a table cell using CSS? My current code has the background color extend all the way to the edge, and padding only affects the content, not the background color. #main-monitor { widt ...
I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields. Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an i ...
I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...
I've noticed that when I insert new images into the DOM, occasionally I can observe the image being displayed in a top to bottom manner. Is there a simple JavaScript method or event handler that I could utilize to ensure that the entire image only app ...
My images are not loading properly when using Bootstrap v5 on my website. I have no issues with images in other parts of the site. This is the HTML code I am using for the image: <img border="0" src="example.com/img/kitties-long.png" ...
Could someone provide an explanation on this subject, detailing its purpose and how it should be understood? <input type="hidden" name="msg" value="GATEFORUM|OE180187|NA|0.00|NA|NA|NA|INR|NA|R|gateforum|NA|NA|F|AMIT SINGH|9993523486|gis16|NA|NA|NA|NA ...
Currently, I am in the process of developing a SASS loop to iterate over a series of images (let's say 50). My goal is to increment the transition delay by 50ms for every nth-of-type image. However, it appears that the current for loop I have implemen ...
I am encountering an issue with displaying the data from my CSV file in an HTML page. Here is a snippet of my CSV file: number:Int,english,french,german 1,one,un,eins 2,two,deux,zwei 3,three,trois,drei 4,four,quattre,four 5,five,cinque,fuenf 6,six,six,sec ...
Is it possible to customize grid gutters at different breakpoints? I am aware that Twitter invested millions of dollars in perfecting Bootstrap v4, and I don't expect to overhaul everything overnight. However, I am curious if there is a way to create ...
When I select both of the green checkboxes, only the most recent table id is sent. The code below includes both the checkbox markup and jQuery function. Checkbox: <div class='md-checkbox has-success'> <input type='checkbox&apo ...
I am struggling with how to manipulate a JavaScript variable in my HTML script and then pass it to a PHP file for incrementing by 1. However, I am unsure of how to return this modified variable back to the HTML file for display. Additionally, I am uncertai ...
Within a Vue component, I have an Array named "block" that contains 4 values. These values are displayed in the DOM using a v-for directive: <div class="block" @click="shuffleArray()"> <div v-for="(number, index) in block"> <spa ...
I am completely new to PHP and have never worked with it before. I'm interested in running a PHP script from within an HTML file on a Linux system. Can anyone guide me through the process? Below is the code from my HTML file: <!DOCTYPE HTML PUBLI ...
Imagine you are dealing with a string like this: text = """<p>Bla bla bla.</p><p>Blo blo blo<a href="http://www.example.com">bli bli</a>.</p><p>blu blu<br> <span style="font-size: x-small;"><br> ...