I'm developing a mobile app using jquery mobile and I used <img> tag to place background image in the content of the main div which is covering the whole content. I'm trying to position jquery mobile grid over the background image but the grid always displayed directly below the image. Is there a way to position the grid over the image where the image is sent to the back and grid is brought to the front?
If you want to cover the whole content with a background image try this way:
.ui-grid-c {
background : url(../pathTo/yourImage.jpg) !important;
}
Related
I'm using media queries to mobilize a website. Everything seems to be going fine except that the background image wont resize as the foreground image does at the top of the page. My media queries take effect at 650px and are in the file junkyardzombie.css at the bottom of the file. Can some please help me with this issue. The test site is at http://shoponlinedemo.com/junkyard-zombiez/
By default, a background image is a static size(the size of the native image). You can control the size of a background image using the background-size property(read more about it here).
In this scenario, you can use background-size:contain; which will constrict the dimensions of the image to the width of the containing element(or to the width of the browser window if there is no containing element).
I'm using Twitter Bootstrap and I want to overlay the carousel element over the hero-unit element. How can I achieve this?
The reason being is that if I insert an image inside the hero unit element it re-sizes it nicely for me, whereas if I set it to the background image it is just cropped when re-sizing.
Please advise?
Thanks in advance.
I'm trying to have a gradient image on the top of my page, and then another one that is on the bottom. I'm using a 1px wide image and using the repeat-x css property, so It can't just be one image. The gradients extend farther into the page than either the header or footer, so using backgrounds only for those isn't really an option. Is there a way to create a new div or have multiple backgrounds for a page?
Yes you can apply multiple background images with CSS3 but it's not recommended as browser support is sketchy. Instead use a container (such as a div) for each background image. Alternatively use img tags and absolutely position them with CSS with a z-index. Hope that helps
I have a liquid layout but I am unsure how to get the background to act in the same manner as the content. I have an image which is being created using the scroll-y css call. On full screen it looks great and creates a bordered white box where all the main content goes in and is directly in the middle of the page. However when I resize my window the background image stays in the same place where as all my content is moved to adjust for the window size. Is there anyway to get the background scroll-y image to move in the same liquid style as the rest of the contenyt?
The only way I know of to do this is to create a new wrapper which essentially becomes your new background. Then cut your bg images (ie border and mid) and turn that wrapper into a fluid layout that always takes up the entire viewport. Without knowing what your bg image looks like, this is the best i can recommend to you.
My target is that a spider is going down it's web in the background.
I need the web image (a simple vertical line) to tile above the spider, while the spider image sits at the bottom.
You can't have two background images on the same element.
Simply, create a div right inside your body that takes full width and height. Then use the tiled background in one of them (the div, I assume) an the fixed background in the other (the body, I assume).
Watch out for margins and padding across browsers, though!
WebKit (Safari, Chrome) does allow multiple backgrounds; just seperate them with commas.
maybe you put "the spider" as fixed background image for your <body> tag and put "the web" as a background image (with repeat) for a div set to { width: 100%; }