Achieving perfect alignment between the image and text at the bottom can be accomplished by setting the text directly at the bottom of

Hi there! I have a question that I want you to read carefully. This is not a duplicate question. I am trying to write text below a background image, and the background image contains a property of 'background-size:center center.' I want both the background image and the text contents to be centered. Click on the link in the comment box to see the image for reference. I have also provided the code that I have already tried. As a beginner in cascading style sheets, your help would be greatly appreciated. Thank you so much in advance!

htmlcssbackground-imagetext-align

Answer №1

The problem you're facing is that you have used an image as the background for the same element where your content resides. A better structure would be like this:

<div class = "layer9">
  <h1><center>Result</center></h1>
  <div class = "result main norep lay"></div> //background image on this
  <div class = "content"> //content is separate, but a sibling - placed below
     <p>kjsdadjaljdlsadla</p>
     <p>kjsdadjaljdlsadla</p>
  </div>
</div>

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

What causes a div with display: table-cell to have excessive padding when an image is added to it?

Is there a way to remove the padding completely? Take a look at the jsfiddle version: CSS: .table { display: table; height: 250px; border-color: black; width: 500px; padding: 0px; } .cell { display: table-cell; height: 250px ...

htmlcss

Enhancing mobile user experience with Bootstrap 4's responsive design

Currently, the footer appears like this in full-screen mode: https://i.sstatic.net/ygI9G.png However, I need it to be stacked and centered when in mobile view. I seem to be having trouble achieving this effect. <footer id="footer"> <d ...

htmlbootstrap-4

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempti ...

javascripthtmlcss

In what way are these columns altering their layout without the use of JavaScript?

While I was searching for a solution to organize content based on screen size, I came across this website. The layout of the site changes depending on the size of the browser window. When I resize my browser or view the site on a phone, the large image at ...

javascriptjqueryhtmlcss

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss

The HTML form submission button fails to submit the form and instead just refreshes the page

I'm struggling to get the save button working on my Chrome Extension settings page. The .click() event doesn't seem to be activating at all. I've included my code below. Should I use the commented out button instead (see below)? HTML <! ...

javascriptjqueryhtmlforms

Tips for personalizing Ion text area in Ionic?

Seeking assistance on how to effectively utilize ion-textarea. As a novice in the realm of Ionic, I am encountering various challenges while working with this feature. The issue lies in the fact that instead of displaying a scrollbar on the right side, the ...

cssangularionic-frameworktextarea

I'm looking for a tool or plugin for webpack that can generate inline CSS directly from SASS code

Looking to generate a unique HTML code using only inline CSS. Here is the initial HTML file: <div id="highlighted">This is the highlighted text.</div> Accompanied by this Sass file: #highlighted { background: #ff0; } Now, the goal is t ...

htmlcsswebpacksass

Why Electron is refusing to open a JSON file

Currently, I am attempting to populate filenames using JSON for the onclick='shell.openItem('filename') function. While the console.log(data[i].url) correctly displays the kmz files for each button, I encounter an error when clicking a butto ...

javascriptjqueryhtmljsonelectron

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

cssresponsive-designtruncate

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

javascriptcsssecurityfirefox

Adjusting the size of a Google map based on the size of the browser

Currently, I am working on implementing Google Maps API v3. The map is displaying perfectly on my page, but the issue arises when I resize the browser. Upon resizing, the map reverts to its original size as it was when the page initially loaded. This is t ...

cssgoogle-maps-api-3

Managing state changes with a slider in ReactJS

I am currently working with the Foundation slider found at this link: click for doc. To access the slider's current value, they recommend using a hidden input like this: <div class="slider" data-slider data-initial-start="50" data-end="200"> & ...

javascripthtmlreactjs

In a responsive layout, a floating div refuses to adhere to the left alignment

I am working on a dynamic list using ASP:REPEATER with floating divs aligned to the left. The current layout is as follows: +---------------------+ +---------------------+ +---------------------+ | | | | | ...

htmlcssresponsive-designcss-float

Develop a website using HTML and CSS for the front-end design, complemented by Java for the

I find myself at a standstill with a project I want to tackle, but unfortunately, my knowledge of modern web development, particularly full stack, is minimal. As a result, I am completely clueless on how to proceed. Here is what I am familiar with and what ...

javahtmlcssweb-deploymentminecraft

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

cssangularangular-material

Add a .handlebars or .hbs file to an HTML document

When visiting the emberjs.com homepage, you will find an example of a todo list using Ember.js and Handlebars.js. Within the todo list, there is an extension for a .hbs file. I am curious - what exactly is a .hbs file? And how can I include a .hbs script ...

javascripthtmlember.jshandlebars.js

Shape with a dark border div

Having some trouble with creating this particular shape using CSS border classes. If anyone can assist in making this black box shape using Jquery, it would be greatly appreciated. Check out the image here. ...

javascriptjqueryhtmlcss

What is the best way to navigate through an XML document within the DOM of an HTML

I am facing an issue with HTML code. My goal is to navigate through an XML document directly from within the HTML code. Here is the XML code: <?xml version = "1.0"?> <planner> <year value = "2000"> <date month = "7" day = " ...

javascripthtmlxmldom

Expanding your selection capabilities using BeautifulSoup

My objective is to harness the power of BeautifulSoup in a unique way. Within my HTML files, there are two specific tags that catch my interest. The first one, which I'll refer to as TagA, is <div class ="A">...</div> The second tag, k ...

pythonhtmlbeautifulsoup