PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How do I apply z-index on my text to float it over my image

 November 17, 2022     css, html, vertical-alignment     No comments   

Issue

I am trying to float text over an image and cannot seem to get the text to sit on top of the image.

If I had an image and a text block inside a div. What CSS would be needed to make the text work as I planned.

Here is my code without the css:

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>

    <img class="bg-image" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>

If you could vertically align the text area too, that would be a massive help.

Thanks!


Solution

If I was doing this I would do it one of two ways.

You can use the image to declare the height of the element, then place the text area over the top like this:

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.text-area {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.bg-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
}

</style>

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>

    <img class="bg-image" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>

Or set the height of the box and use a background image like this:

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: relative;

    background-image: url(https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-area {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.bg-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
}

</style>

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>
</div>


Answered By - Jason Is My Name
Answer Checked By - Candace Johnson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing