How to display text over an image css [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/

I need to align this text at the bottom part of the image

I tried putting this in css:

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    vertical-align:bottom;
} 

but this doesn't work ...

.............

Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text

How do i do that



Solution :

Try this:

body{
    color: #202020; /*#3d3636    #fffaf0; #fdfdfd  8c8c8c*/
    font-size:100%;
    font-family: 'Maven Pro', sans-serif;
    line-height:1.4em;
    min-height:100%;
    /*padding-left: 5%;*/
    background-color: #fdfdfd;
}

.head_img{
    margin-top:10%;
    font-size:1.5em;
    line-height: 1em;
    font-weight: bold;
    font-style: italic;
    color: #000000;
    text-align:center;
    position:relative;
}

.head_img p { 
   position: absolute; 
   left: 0; 
   width: 100%; 
    bottom:5px;
    margin:0;
    padding:0;
}   

@media (max-width: 1366px) {
.head_img img { display:none; }
}

I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.

Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.

Updated fiddle: http://jsfiddle.net/5AUMA/33/


    CSS Howto..

    How to avoid inheriting opacity property in CSS?

    how to use {{$variable}} in css , Laravel 5.1 [closed]

    How to load all CSS and JS from one html file?

    How to display 3 buttons on the same line in css

    How to make a text flash in html/javascript?

    How i can match multiple CSS selectors

    webkit just cuts off decimals in css number … how to workaround?

    How do I make elements flow horizontally instead of vertically?

    With html tables, using CSS, how do I get the tables next to each other?

    How can I keep the progress bar number value centered and on top?

    How do I set a cursor css for text inside li element?

    css how to make H2 tag look same as H3 tag (turned out hard!)

    How to keep div on one line and append ellipses

    How to apply css in react component when using ES6?

    How to use pure CSS to show an animation of one element's background and color property?

    How can I set first element to display: none;?

    How can I change my code from PHP to HTML?

    How do I use CSS to to vertically center align an image in a div?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How do I split a WordPress theme into 2 columns?

    Site Network Bar - Show Current Site Stats, CSS?

    How to indicate that an LI with a link was pressed.

    How to change css dynamic by javascript

    How to override css img properties?

    How to read CSS Content value with jQuery?

    Background color does not show up when scrolling to the right

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    how to change css styles of custom jquery widget?

    How to format the text below using css

    How to transform:scale the top and bottom part of a div using CSS