I'm working with Sencha Touch 2 components now.
I'm facing the following issue:
I set a background image to my components using stylesheets. My whole scene is made up of several components / containers having background images. When I instantiate my scene - the image loading process is asynchronous - i.e. my scene is displayed and then later images in the scene are loaded and displayed.
I would like to know how to wait until all my images are loaded and then display my scene. In fact, I can use Ext.Img class and its load event, but this is what I don't want to do. I need to style my images (as backgrounds) using stylesheets.
Thanks a lot.
If the images are small try embedding them as base64 encoded strings. And use them like
background: transparent url(data:image/png;base64,LONG-STRING-OF-BASE64-TEXT)
in the css.
For adding background image on different components/containers define your CSS like this:-
.x-panel{
background:url(image.jpg)no-repeat center;
}
.x-scroll-container{
background:url(image.jpg)no-repeat center;
}
.x-tab.panel{
background:url(image.jpg)no-repeat center;
}
Include this CSS in your index.html in the head section :-
<link rel="stylesheet" type="text/css" href="style.css"/>
Hope this helps.
Related
not sure how to add a background image to a streamlit app.
want to add a still image to the background of a streamlit app i am building, by still i mean the user being able to scroll down and have the image stay still in the background.
not sure how to do it and im learning to do coding using streamlit
Replace your-image-url-here with your image url
st.markdown("""
<style>
.stApp {
background: url("your-image-url-here");
background-size: cover;
}
</style>""", unsafe_allow_html=True)
The container class is used to restrict content to 70% of screen width. Works wonderfully for our app on medium and larger containers.
Unfortunately, we then want 100% spacing on small. Anyone have ideas?
In my code I just do something like this
#media screen and (max-width: the size you need)
.container
width: 98%
I just call this after importing the materializecss sass and override the default behavior
Here is the code they use and which you have to override: link
I need to use container (and not container-fluid) , but I still need to add background to all the remaining background( the background color differ from container to container). any idea how to do it?
thanks!
Your question is not pretty clear.
I will answer according to my understanding.
There should be only one container in the web application. Because it comes with fix width(not in %) i.e. 1170px/970px/750px.
So there should be only one to contain the website.
Now the only background out of container can be styled with the body tag.
body{
background-color: #ddd;
}
I am using an background image which is inside a header tag. The coding looks like this:
<div id "header">
<div id "logo">
<div id "nav">
</div>
</div>
</div>
The header is inside a container element which is sized at width:75%. The logo image is 1024px wide and 75px height. I am trying to find a solution that would keep the logo image which is inside a background tag at 100% width of the container element and when re-sized it is re-sized proportionally.
The solution I have thought of is
background-size:auto;
I have chosen the 1024px as it would accommodate most screen. The min-width would be 780px and the max-width:1024px.
What is the best solution to have this background image re-size in proportion the the visitor screen and the container element which it is in.
Thanks
Try this:
background-size: 100%;
The best method I found to work was
min-width:100%;
The only way to resize background is with JavaScript.
The code using jQuery is here: https://gist.github.com/epoberezkin/5070642
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').