View Full Version : Transparent background of Carousel

10 Feb 2011, 1:45 PM
Hi all,

I have problems to get a transparent background in my carousel. I saw that it is not
enough just to give each "card" the css property "background: transparent". Do I have
to edit the original Sencha Touch CSS file? Or how can I get a transparent background?

Here is my js so far:

onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
items: [{
cls: 'tab1',
html: 'Content 1'
cls: 'tab2',
html: 'Content 2'
cls: 'tab3',
html: 'Content 2'

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
defaults: {
flex: 1
items: [carousel]

As mentioned above, making ".tab1 { background:transparent }" doesn't fix the problem.
Some tag in sencha-touch.css is overwriting it but I can't figure out which it is.

Thanks a lot for your help! :)

11 Feb 2011, 5:23 AM
If anyone is interested in the solution, this line needs to be edited
in Sencha-Touch.css

.x-fullscreen {
/* changed */
background-color: inherit;

Still it would be more elegant if I could achieve my idea without
editing the source files of Sencha. Any help would be appreciated!


23 Aug 2011, 12:12 AM
Thanks, I have tried to set a background for all pages on my carousel but wasn't having much luck, even when defining a bg image in the CSS and calling it with 'cls'. I did try following evant's post but it didn't work for me. It was placing a background image behind the carousel items instead of in them so you could only see a bit of it when you swipe to the end.

Is this a bug perhaps? In the layout video it clearly shows colours as a background to the carousel but images seem to not work as expected.

Thanks again,