Place text in top-left corner of an image | text over absolute image
the way to set text absolute on the top corner image,first you need to set container class as relative and elements in container must be absolute if It is over on .
<h1>Place Text In Top-Left Corner Of An Image</h1> <div class="container"> <img src="https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg" alt=""> <div class="bottomleft"> <p>Place Text In Top-Left Corner Of An Image</p> </div> </div>
style.css in body
.container{
position: relative;
}
.container img{
width: 100%;
height: auto;
border-radius: 20px;
}
.bottomleft{
position: absolute;
top:0;
left: 0;
background-color: green;
color:white;
border-radius: 20px;
margin: 10px;
width: 50%;
text-wrap: wrap;
text-align: center;
}
.bottomleft p{
padding:0 15px;
}
Share this Article !
how to create custom scrollbar on sticky table with css
the table is sticky for the first table th and table td. Selector elements was used : ::-webkit-scrollbar — the entire scrollbar. ::-webkit-scrollbar-thumb— the draggable scrolling handle. ::first-of-type— every element that is...
7 useful CSS Tricks and Tricks for Front-end Developers
Font size and scale sizefor legibility font should be between 14px -16px on body and heading 1 to 6 should use https://typescale.com/ to scale font fit with your browser. CSS variablesyou can...
Css Responsive width on Facebook Page Plugin
Facebook Page Plugin doen’t responsive because It is frame that embed from facebook page profile. making it responsive by adding style on frame width:100%. The solution you can put code in your...
List all the tags in a WordPress
getting all tags and have some style in Worpress as below code. I hope this code can help you. <ul class="tag-ul"> <?php $tags = get_tags('post_tag'); if ( $tags ) : foreach (...
CSS Selectors
A CSS selector selects the HTML element(s) you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based...
CSS Tutorial
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. Classes and IDs are used as hooks for CSS styles. While the way...