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.
Related
I am currently working on a school project in which we are tasked to make a website. I am attempting to make a background image stay at a specific size no matter the screen size while making the image repeat itself vertically.
I have looked far and wide attempting to find an answer to this question and couldn't find anything which helps- "Your my only hope"
I am new to Stack Overflow so I hope I have formatted this correctly.
Thanks- DH
Example:
body {
background-image: url("background.png");
background-size: auto;
background-position: auto;
background-repeat: no-repeat;
background-repeat: repeat-y;
You can apply the size for your background using background-size property, and you can repeat the background using background-repeat property through CSS. For example look at the following snippet. The original size of the image is around 3264x2448. But I have mentioned in my code 150x100 and repeating the image vertically using repeat-y property. I have applied the entire background for the body element and align it horizontally top and vertically center.
body {
background-image:url("http://myanmareiti.org/sites/default/files/sample-5_0.jpg");
background-repeat:repeat-y;
background-size:150px 100px;
background-position:top center;
}
<div>
Something HRere
</div>
Try this CSS:
background-image: url("path/image.jpg");
background-repeat: repeat-y;
background-size: cover;
Background-repeat has given value repeat-y image vertically as you want it, This will repeat the image vertically on your page and background size property can take. cover, values in pixel or in percentage. I think you should play with it in % to fit for you screen sizes.
I'm having trouble getting my website to display properly on mobile devices
Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
html, body {
width:100%;
height:100%;
}
I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.
My website - http://renoized.com
You could try either:
Background size: cover;
or
Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.
The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.
All I had to do was copy the css from here:
html {
background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
background-attachment: scroll, scroll;
background-color: #000;
background-repeat: no-repeat, repeat-y;
background-position: center top, center top;
}
to my content container tag, which in my case is #page.
What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>
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
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;