CODEWITHSUNDEEP
javascripthtmlcss
Om Komawar
Om Komawar

Reputation: 251

Placing image over text

How to overlay image on text which is like a pattern image.

like we do in css for applying color with hex value

color: #ffffff;

How it can be done?

I'm trying to get pattern over text

something like this

Thanks in advance.

Upvotes: 3

Views: 764

Answers (2)

Falguni Panchal
Falguni Panchal

Reputation: 8981

trying this

answer1

=============================================

answer2

demo

html

<div id="container">  
  <h1>HAWAII</h1>
</div>

css

h1, p { margin: 0; }

#container {
    padding: 20px 20px 100px;
    margin: 50px;
    position: relative;
}
#container h1 {
    /* has same bg as #container */
    background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);

    font-size: 12em;
    font-family: impact;
    left: 0;
    line-height: 100%;
    padding-top: 25px; /* padding + border of div */
    position: absolute; /* position at top left of #containter to sync bg */
    text-align: center;
    top: 0;
    width: 100%;
    text-fill-color: transparent; /* not yet supported */
    background-clip: text; /* not yet supported */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent; /* not yet supported */
    -moz-background-clip: text; /* not yet supported */
    /* text-shadow: 5px 5px 0px rgba(0,0,0,0.1); */
}

================

answer3

css

body {
    font: normal 16px/1.5 Arial, sans-serif;
}

h1, p {
    margin: 0;
    padding: 0 0 .5em;
}

.container {
    margin: 0 auto;
    max-width: 480px;
}

/*
 * Caption component
 */
.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

demo

Upvotes: 3

Jatin Kalra
Jatin Kalra

Reputation: 186

I have please check the code..

h1 {
  
   background: url(http://www.lovethispic.com/uploaded_images/114180-Pink-Glitter-Pattern-.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size:80px
}
<h1>Welcome</h1>

Upvotes: 4

Related Questions