I have a textbox that is formatted through a background-image. Now, when some AJAX processing is happening, I want to display a spinning icon in the bottom right of the textbox. I can add the class to the text box when this happens, but it obviously replaces the background.
.suburb-loading {
background: url('/images/loading_spinner.gif') right center no-repeat;
}
Is their a way to overlay 2 backgrounds? Or what is the best way here to overlay the image over the background?
Use CSS multiple backgrounds by just separating them with a comma
.suburb-loading {
background-image: url('1.png'), url('2.png');
background-repeat: no-repeat, no-repeat;
}
Demo
Fiddle CSS
input {
background-image: url('http://www.melabev.org/images/spinner.gif?1331633304'), url('http://1-art.eu/images/backgrounds/vellum/vellum-old-vellum-background2.jpg');
background-repeat: no-repeat, no-repeat;
background-position: center right, 0 0;
height: 35px;
}
You can either make use of CSS3 Multiple Background feature, but you should know that this will not work in all browsers, Or you can create another div overlaying the original one like with absolute position and this will work for old browsers those don't support multiple backgrounds
Related
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I am trying to set multiple backgrounds for the document body. Why isn't this code working?
body
{
background: url(../Images/StandardBackgroundPattern.png) repeat, url(../Images/StandardBackground.png) center center no-repeat;
background-size: auto, cover;
}
This code only displays the Photo. No pattern to be seen anywhere (but Dev Tools says that both the Photo and pattern have been loaded).
The intended effect of the above is to include a background photo, centered and filling up the width and height of the viewport, and to place a pattern ontop of that and repeat it both horizontally and vertically.
It would be preferable to avoid using multiple div's for this if possible.
Try like this. It should work fine.
body {
background-image: url(first.png), url(second.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
If you are using background shorthand property. You can use this shorthand method.
body{
background: url(first.png) center bottom no-repeat, url(second.png) left top no-repeat;
}
Why isn't this code working?
Because that's a syntax error.
It would be preferable to avoid using multiple div's for this if
possible.
Sorry. You'll have to do it in your un-preferable way. Or, split the image itself and then use it.
I am trying to implement the following design:
I am having trouble with the red stripe that runs across the page, I'm not sure how to implement that..
I though of using background images, one in the header and one in the right sidebar. The problem is I don't know how to make it so that the stripes connect to each other.
What I tried:
.header {
background-image: url('../images/header-background-2.png');
background-repeat: no-repeat;
background-position: center bottom;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.sidebar {
display: block;
background-image: url('../images/sidebar-tile.png');
background-repeat: repeat;
background-position: center;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
But it doesn't work.. You can see the result here
Any idea how to implement this?
I realized that it would be too difficult to implement this design on a fluid layout. So here is what I did:
on width < 1030, I implement another layout, not in the scope of this question.
For screen widths greater than 1030px, I set a max-width on my content. I now have a fixed width layout that will make it much easier to implement the red stripes.
Here's my code:
.wrap { max-width: 1030px;}
And apply the wrap class on my inner-header, inner-content and inner-footer.
Then:
#inner-header {
background-image: url('../images/header-background-1030-3.png');
background-repeat: no-repeat;
background-position: center bottom;
}
#inner-content {
background-image: url('../images/sidebar-background-1030-tile-2.png');
background-repeat: repeat-y;
background-position: center top;
}
#inner-footer {
background-image: url('../images/sidebar-background-1030-tile-2.png');
background-repeat: repeat-y;
background-position: center top;
}
Note that my background images all have a width of 1030px.
There's no resize problem anymore and the layout keeps in place nicely.
Try creating that image by making a 1x1 pixel in that color ie., rgb(194, 39, 45). Then you can use this image and CSS for the (straight parts) of the background (ie, where the curves are not placed). You can also use CSS entirely by creating divs and border radius (radii?). A 1x1 pixel repeated using CSS is better for a background image bc it will look the same on any device.
maybe i don't understand your question, but if you want the website to be readable in various devices and window sizes; why wouldn't you use divs and style rules?
First let's divide the red part into the first curve at the top left, the menu, and finally the last curve/rest of the red bar. In on div create the first curve as an image, using photoshop or any other photo editor. Then in the next div create the menu bar, with the same red colored background. Finally do the same thing as you did for the first curve to the last part. Use a photo editor to to draw it out as a jpeg and put it into the div. Use css styles to order the divs in place.
I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:
body {
background-image: url('/cheri/image/background.png'),
url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:
http://img198.imageshack.us/img198/4560/screenshot20120916at851.png
I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.
Thanks for any help!
Use min-height: 100% on both html and body:
html, body { min-height: 100%; }
DEMO
It creates no issues when you have enough content to cause scrolling.
DEMO
Set the HTML element as well:
html {
background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
I have a site and I wanted to change it's background. I want to put a background on top and bottom.
Here is the CSS code:
div.bg_top {
background-image: url('bg_top.jpg');
background-repeat: no-repeat;
background position: top center;
}
div.bg_bottom {
background-image: url('bg_bottom.jpg');
background-repeat: no-repeat;
background position: bottom center;
}
HTML code:
<div class="bg_top">
<div class="bg_bottom">
Content Here.
</div>
</div>
is that correct?
i'd suggest using CSS short-hand for best practice
.bg_top { background: url('bg_top.jpg') no-repeat top center; }
.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }
As Lance said just change the background position: to background-position: it should work fine.
But my concern is that, the way you have given the backgrounds, with different resolutions the two background images may overlap and it will screw all the design. So, to make it compatible with all the resolutions you need to choose any other option. I will suggest use any image editor and place the images as you want and make one image and then use that image as the background.
To avoid changing the html, you can also put one of the backgrounds in the html and the other in the body. And use a min-height (height for IE6) to avoid overlap.
It should work if you fix the background-position:
background-position: center top;