how to overlay text on top of an image

[John Herdean]

i would like an image to be transparent to labels. How would i go about doing that?

[Igor]

Please try the following steps:

1 add label to the page and give it name "label_id_withBackground"

2 add new css with the below CSS code:

pre
code
.label_id_withBackground{

Code: Select all

 display: block; 
 height: 200px; 
 color: #fff; 
 font-size: 30px; 
 background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcRz1LsM2owW22uAyzALILjlxvUfl2eLOHMqFAXQFXrNl_D28SgfxQ); 
 background-size: cover; 

}
/code
/pre

3 start application and you will get something like this:

Please take a look to the following links: http://www.w3schools.com/css/css_back...
http://www.w3schools.com/cssref/css3_...

[John Herdean]

ok thanks i will try it out

[John Herdean]

Hi There,

what i did is build a grid and assign the grid to a css class, and the css is written like this:

.profile-view-pic {
background: no-repeat url(../image/profile_pic_large-280x191.png) 0 0;
width: auto !important;
height:auto !important;
}

the grid dimensions are set to auto as well. But, the background picture is not extending all the width of the screen like i want it to, heres a screenshot:

the size of the picture is 180x290, but i have auto in the css code for width, Is there something wrong with my css code or something else?

[Illya Stepanov]

Hi John,

You miss some style in your CSS. Originally was proposed this:
pre
.label_id_withBackground{
display: block;
height: 200px;
color: #fff;
font-size: 30px;
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcRz1LsM2owW22uAyzALILjlxvUfl2eLOHMqFAXQFXrNl_D28SgfxQ);
background-size: cover;
}
/pre
In your CSS you have missed this style: codebackground-size: cover;/code

Also we have gave you a link to this property: http://www.w3schools.com/cssref/css3_...

Please read about this style to understand how it works.

[Alex GG]

Can anyone point me on how to achive something like this?
It ́s a label on the right corner of an image..to mark the Ad as important...

I tried to find a CSS on the web, but still no luck..

thanks!

[Maryna Brodina]

Hello!

Please take a look here http://stackoverflow.com/questions/41...

[Anand]

Hi, I need a list of images with overlay texts. Any examples you can point to?

[Illya Stepanov]

Hi - the above example does not works for you? You can make it using CSS rules the way you needed.