This inquiry might not be the most trendy, but I am seeking guidance on the best approach to tackle this task, utilizing HTML, CSS, and Bootstrap. For reference, something similar to the image at this link.
This inquiry might not be the most trendy, but I am seeking guidance on the best approach to tackle this task, utilizing HTML, CSS, and Bootstrap. For reference, something similar to the image at this link.
Implementing the CSS transform method:
.cover {
background: blue;
height: 100px
}
.block {
transform: translate(0, -65px);
padding: 0 20px;
}
.text {
background: red;
height: 150px;
}<div class="cover"></div>
<div class="block">
<div class="text">Hello, "Background Image over another div"</div>
</div>Here's a neat trick for positioning one section over another - simply apply a negative margin top. You can also opt to use a background image in place of certain styles.
<section style="background:red;width:100%;height:300px">
</section>
<section style="width:100%;margin-top:-150px">
<div class="container">
<div style="width:100%;height:300px; background: white;"></div>
</div>
</section>
Here is a solution that should meet your needs. https://codepen.io/anon/pen/KevYXE
In essence, I have created a DIV overlay with a background DIV. The background DIV is divided into two sections - the top section featuring a background image and the bottom section with a solid color. I utilized a relative position for the overlay and employed percentages to ensure everything remains centered.
HTML
<div id="wrap">
<div id="bg-overlay"></div>
<div id="bg-wrap">
<div id="bg-top"></div>
<div id="bg-bottom"></div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 600px;
background: #ccc;
margin: 0 auto;
position: relative;
left: 0;
right: 0;
}
#bg-overlay {
position: absolute;
height: 70%;
max-width: 800px;
width: 80%;
top: 15%;
background: #fff;
left: 0;
right: 0;
margin: 0 auto;
-webkit-box-shadow: 0 6px 6px -6px #666;
-moz-box-shadow: 0 6px 6px -6px #666;
box-shadow: 0 6px 6px -6px #666;
}
#bg-wrap {
width: 100%;
height: 100%;
}
#bg-top {
height: 50%;
width: 100%;
float: left;
background: url("https://picsum.photos/2200/300") no-repeat;
background-position: center center;
}
#bg-bottom {
height: 50%;
width: 100%;
float: left;
background: #cccccc;
}
I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...
I have integrated a bank calculator tool into a website. The calculator opens in a new window, but I am encountering an issue. Users need a shortcut to open the calculator multiple times. I have discovered the accesskey feature, which works the first tim ...
Currently, I am utilizing Bootswatch4 within Bootstrap4 and have a requirement for a div with backgrounds that change or fade. After some research, I stumbled upon a JavaScript solution that aligns closely with my needs at: https://github.com/rewish/jquery ...
Having a simple issue here, I've set the value of an input text box, but when the page loads it is displaying in multiple lines, and this seems to be happening only on Chrome browser. Can anyone offer any assistance? This is the HTML code for the ...
I have created a display of data from my database in the form of a table with checkboxes on the left. My goal is to link these checkboxes to the question number (ID) so that when someone selects certain questions and submits, the selected IDs will be echoe ...
I am currently in the process of trying to showcase a paragraph of text (content) from django. However, my aim is to incorporate <span class="modify"> into particular words that match pre-defined words located within a referenceList within the paragr ...
Situation: I have a collection of images stored in a directory named uploads or images located outside the website's main folder (outside of public_html). My goal is to display one of these images inside a file called image.php. Guidelines for achi ...
I have a desire to create a button within a web browser that, when clicked, will either copy the current URL address into a file or open another web browser and paste it there. Being new to programming, I am unsure of which language to use for this task. ...
Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...
Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...
Running into an issue here. I'm trying to switch from display: none to display: flex, display: flex-box, and display: -ms-flexbox but for some reason it's causing errors in my code.. Here's what I've been working on: $(elem).css({&apos ...
How can I create a responsive swipe image slideshow using CSS and JQuery that changes the image when swiping from right to left? I want it to work seamlessly on both computer and mobile screens. ...
I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/ My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contac ...
Can someone please help me with formatting my tabular data in a specific way? column A | column B | column C | column D | ------------------------------------------- 1-1 | 2-1 | 3-1 | 4-1 | ------------------------------------------- 1 ...
Is there a method using JavaScript to determine if the popover is open when utilizing the new popover API? <button popovertarget="pop">Trigger the popover</button> <div popover id="pop">This is the content of the popover!</div> ...
As a newcomer to web design, this is only the second website I have ever created. However, I am facing an issue with my Nav bar that I cannot seem to resolve. I want my "Other Pages" section to be visible when the screen size is below 600px and hidden when ...
Is it possible to customize the play icon for an embedded YouTube video? I came across a post discussing this topic: Can I change the play icon of embedded youtube videos? However, when trying to use something transparent as the new play button, the origin ...
Having long Arabic text within <p> tags in my HTML file (loaded by WKWebView) on my app results in unusually large word spacing and unreadable text. In Xcode, the letters in the HTML file appear disconnected. Is there a way to prevent this issue with ...
I am having trouble determining the actual height of a video element. Despite seeing in the developer tools that it is 384px, I am only able to retrieve a height of 342px. I attempted the following code snippet, but it only gives me the natural height, no ...
I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...