Creating a responsive text block overlay on images using CSS: A step-by-step guide

Could someone please advise me on how to create a text block over an image that remains consistent even when the screen width is less than 720px? Currently, the text block shifts position and looks unattractive at smaller widths. I would like it to stay fixed in place, just like it does at 1024px.

Below is my CSS code:

.text-block { position : absolute; bottom: 0px; left:0px; }

The text block appears correctly at screen widths above 1024px, but becomes distorted below 720px.

View the image here

I apologize if there are any errors in my writing.

htmlcss

Answer №1

The image and block text have been encapsulated within a div with the class category. This div is styled with position: relative, so that the positioning of the header inside it is based on this div. For a closer look, check out the demo

HTML

<div class="category">
    <div class="category-header">
         <h4>Politics</h4>
    </div>
    <img src="http://tvberita.com/foto_berita/8dedi%20mulyadi.jpg">
</div>

CSS

.category {
    position: relative;
}
.category > img {
    display: block;
}
.category-header {
    background-color: #870000;
    display: block;
    color: #FFF;
    font-family:"Oswald", sans-serif;
    text-transform: uppercase;
    padding: 10px 40px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.category-header h4 {
    margin: 0px;
}

Answer №2

Check out this https://jsfiddle.net/9Jcm6qtv/19/

HTML

<div class="container">
    <img src="http://placehold.it/450x200" alt="">
    <div class="content">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

CSS

.container {
    position: relative;
}

.content {
    background: #333;
    color: white;
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
}

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

When attempting to achieve a CSS percent width, the output is given in pixels instead. I am in search of a solution where the percentage remains the same as the

My styling is set as a percentage, like this: <style> #somediv {width:70%} </style> <div id="somediv"></div> jQuery's css() function returns the result in pixels $(document).ready(function(){ var css = $("#somediv").css( ...

javascriptjqueryhtmlcss

Is it possible to save any additions made to the DOM using JavaScript into local storage, so that it can be retrieved even after the page is reloaded?

Let's consider a scenario for testing purposes: you have a function that appends <li> elements inside an <ol> container, and you want to retain all the list items added. Is there a way to store them in Local Storage (or any other local sto ...

javascripthtmlcss

Floating left and right positions for a fixed CSS div

My navbar is currently set to float right and 330px left with absolute positioning. Everything is working fine in this setup, but I want it to be fixed. The problem arises when trying to convert it to a fixed position. I've tried various methods but n ...

htmlcsscss-float

Insert data into the corresponding input box by selecting a checkbox with the same class individually

How can I place the value of checked checkboxes into different input boxes with the same class? Currently, the value of all input boxes with the same class reflects the value of the checked checkboxes. I am looking for a way to assign the value in input bo ...

javascriptjqueryhtmlcheckbox

Ways to adjust the border color when error helper text is displayed on a TextField

I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password." It should look like this: https://i.sstatic.net/Nu0ua.png ...

javascripthtmlcssreactjssass

Expandable Checkout Form for Woocommerce

I need help troubleshooting a WooCommerce collapsible checkout form using Bootstrap Collapse. Below is the HTML markup I am currently using: <div class="panel-group" id="checkout-accordion"> <div class="panel panel-default" id="panel-billing"&g ...

phphtmltwitter-bootstrapwoocommerceaccordion

Let's discuss how to include the scrollTop option

I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file. /*** ...

javascriptjqueryhtmlcss

Is it possible to form a union type using an interface?

My goal is to call the function getSvgPresentationAttribute using any valid CSS property name as cssStyleAttribute. However, I am encountering an issue with my current code where I receive the error message Type 'CSSStyleDeclaration' cannot be us ...

csstypescript

Assistance Needed with XPATH and CSS for Selenium Automation

Can anyone assist me in finding the appropriate XPATH/CSS locator to extract text from the structure below? <div class="page-header song-wrap"> <div class="art solo-art"> <div class="meta-info"> <h1 class="page-title"> Zehnaseeb I ...

cssseleniumxpath

Ways to achieve a gradient effect on top of an image

Hey, I'm trying to implement a gradient on images in my project. Here's what I have so far: import Image from 'next/image' import Box from 'mui/material/Box' import PlayIcon from './PlayIcon.tsx' <Box ...

htmlcssreactjsnext.jsmaterial-ui

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

My latest project is an app that features multiple text areas. Personally, I use the app with two languages - English and another language that is aligned to the right. However, the default setting has the text-areas aligning to the left. To change this ...

htmlcssreactjstext-align

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Check out this link for testing: http://jsfiddle.net/EnJSM/ You might observe that by removing "color: #6CB5FF;", the transition behaves differently - it only works for the second part of the line. I'm interested to see what solution you come up wit ...

javascripthtmlcssmootools

Using the .each() method in jQuery to dynamically assign an attribute to a parent element in JavaScript

I'm new to JavaScript and jQuery and I need help transitioning my code from jQuery to pure JS. Within my HTML, there are multiple parent divs each containing a child div. My goal is to assign a class to both the child and parent elements, with the p ...

javascriptjqueryhtml

What is the method for retrieving a PHP JSON variable value and displaying it in HTML?

Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...

javascriptphphtmljsonfacebook

Creating a dynamic and intricate HTML list item using jQuery within a loop

Currently, I am faced with a situation where I have a large amount of JSON data that needs to be processed. My objective is to output each "data" item on the page as a list item. While I have a working solution in place using jQuery, I am concerned about t ...

jqueryhtml

Manipulating the distinct look of the final element in an *ngFor loop

I am trying to enhance the appearance of the last line of controls generated by an iterator by making it disabled and somewhat invisible. Currently, my code is functioning well, as shown below. <div *ngFor="let item of data; let last = last;"> &l ...

htmlcssangular

Preserving form input after an unsuccessful submission: A simple guide

As a beginner in the coding world, I am currently working on creating a contact form using PHP. One of the features I've included is a reCaptcha that must be checked before submitting the form. However, if the user forgets to check the reCaptcha and h ...

phphtmlcssajax

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

javascripthtmlcssvue.jsvuejs2

I am attempting to center an image on a webpage while disregarding the margins set on the

Bar.html: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="customStyle.css" /> </head> <body> The text formatting is spot on. Unfortunately, the following image should be centered, but it's off ...

ioscsswebkitblockcentering