Forum | Appery.io

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

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{

 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_...

ok thanks i will try it out

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?

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.

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!

Hello!

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

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

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