I am faced with a challenge of creating 4 columns, each containing an image where text needs to be displayed over the image. While I know this can be done using CSS, I am looking for a way to set the image as a background directly within the HTML file. This will allow me to add 'alt' text for SEO purposes. What would be the most effective approach to accomplish this?
To create text overlaid on an image, place the img in the col container and set its position to relative. Then, use absolute positioning to overlay the text on the image.
* {margin:0;}
.col {
float: left;
width: 25%;
position: relative;
}
img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: black;
color: white;
padding: 1em;
}<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>
<div class="col">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="overlay">
<h2>text</h2>
</div>
</div>#image-as-bg {
position: relative;
overflow: hidden;
}
#image-as-bg .content {
height: 500px;
padding: 20px;
}
#image-as-bg img {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: -1;
}<div id="image-as-bg">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="" />
<div class="content">
Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text
</div>
</div>Recently, I completed the Getting Started with Flask on App Engine Standard Environment tutorial. If you are interested, you can find the source code here. During my testing using Firefox and Chrome, I noticed that both browsers did not render the HTML te ...
Having a jQuery issue with the following HTML code snippet: <div class="side-finder"> <div class="brand"><img src="/img/test.net-logo.png" /></div> <div class="finder-content"> <ul class="nav nav-pills nav-stacked" id= ...
In the following code snippet, I am aiming to achieve the following: Allowing the browser to choose between WEBP <source> and JPEG in<img> (as a fallback). Displaying the image at 754px width for viewport widths greater than 1058px. For small ...
Greetings all, I'm new to HTML and struggling with how to center a URL on my webpage. For example: <a href="http://www.google.com"> Click Here to Open Google </a> I attempted using the tag and the STYLE attribute but without success. ...
Having an issue with responsiveness on my website at . When I access a webpage from the browser on my smartphone, the site is fully responsive. However, when I try to open it from a link in Messenger, it appears like the PC version shrunk down to fit a mob ...
Here is the command I used to install React I've been wanting to learn React, so I attempted to install it using the command npx create-react-app my-app. The installation process began, installed some files, and then displayed a "done" message in 98 ...
I need help with formatting a DateTime string retrieved from an API where it is in the format of YYYY-MM-DDTHH:MM:SS +08:00 and I want to change it to DD-MM-YY HH:MM getDataFromApi(res) { this.timestamp = this.timestamp.items[0].timestamp; console ...
I'm currently facing an issue with the menu that I recently coded: https://jsfiddle.net/nL124rLq/1/ In my CSS, I am using a general selector (~) and I have a feeling that this might be the root cause of the problem: #nav #link1:hover ~ #flydown { le ...
I'm currently learning the ins and outs of HTML/CSS while working on a navigation bar. However, I've run into an issue with scaling. Here is the website in full-screen mode.https://i.sstatic.net/kCFqn.png Here is the website when it's sligh ...
I need to emphasize specific text that requires underlining. <div><span class="text">Underlined</span><br>blah blah</div> As a result, the content should be displayed as follows: Underlined --- blah blah In my SASS/SCS ...
My current project is using Scss in combination with Bootstrap for design. I have implemented purgeCss to remove unused Css, and customized my postcss.config.js file as follows: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ " ...
Currently, I'm utilizing the qtoxygen style and I am curious if anyone knows how to remove the shadow frame on QPlainTextEdit. Even after attempting to customize the CSS with { border: none }, the shadow continues to be displayed. ...
After inspecting my HTML element, I noticed that it isn't occupying 100% of the browser view, even though I have set the height to 100% in my CSS file. I tested it in both Chrome and Firefox, and the issue persists. I suspect that the browser is addin ...
I am looking to customize the URLs on my website to appear like this: www.example.html/1 www.example.html/2 www.example.html/3 instead of their current format: www.example.html/1.html www.example.html/2.html www.example.html/3.html Can anyone provide a ...
Exploring the realms of CSS grid on my website has led me to create an intriguing "add friend" menu design. The layout I am aiming for is depicted in this visual representation: https://i.sstatic.net/vg2T8.png Here is a snippet of the HTML and SCSS code ...
The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...
When using Angularjs, binding an input select to the model results in a new empty option being created <option value="? undefined:undefined ?"></option> Here is an example of the code: <select name="category" ng-model="hotspot.category"&g ...
I'm struggling to understand how to initiate animations within a nested ngRepeat using Angular. The CSS class ".test" is supposed to be animated. However, when I apply ".test" on the inner ngRepeat, it doesn't seem to work (Plunker): <div ng ...
My goal is to create a user-friendly experience where users can click on a product, go to the product page, and add a review directly to that page. The reviews will be displayed as users submit them. I'm not entirely convinced that this is the most ef ...
Looking to achieve a responsive layout using flex without the need for media queries. Can anyone provide the CSS code for a layout using flex or grid? I've attempted the following: .parent { display: flex; flex-wrap: wrap; height: 100vh; } ...