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;
Related
image2 is a wallpaper size jpg and image1 is a small image.
Why did image1 scale larger and how do I display it in its original size on top of image2?
html {
background: url("image1.jpg") no-repeat, url("image2.jpg") no-repeat center center fixed;
}
Your question isn't super clear but I will do my best to help.
First I would check out this article about background image stacking it will help you in terms of the order:
https://css-tricks.com/stacking-order-of-multiple-backgrounds/
I would suggest you need to do the following:
html {
background:
url("image2.jpg") no-repeat center center fixed,
url("image1.jpg") no-repeat;
}
You may also need a fallback depending on browser support.
If you can provide a codepen it would help
try something like
html {
background:
url("image1.jpg")
no-repeat;
}
.image2 {
url("image2.jpg")
no-repeat center center fixed;
}
<html>
<div class="image2"></div>
</html>
The answer is html tag background image will always stretch no way around it.
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'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
Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html
When I do it, I end up getting white borders around the image no matter what I do. What am I doing wrong?
If you're hoping to use background-image: url(...);, I don't think you can. However, if you want to play with layering, you can do something like this:
<img class="bg" src="..." />
And then some CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the width: 100%; to apply to the whole page.
Here's a quick demo if you can't rely on background-size: http://jsfiddle.net/bB3Uc/
Background images, ideally, are always done with CSS. All other images are done with html. This will span the whole background of your site.
body {
background: url('../images/cat.ong');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You set the CSS to :
#elementID {
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
height: 200px;
}
It centers the image, but does not scale it.
FIDDLE
In newer browsers you can use the background-size property and do:
#elementID {
height: 200px;
width: 100%;
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
background-size: 100% 100%;
}
FIDDLE
Other than that, a regular image is one way to do it, but then it's not really a background image.
the problem is the margin of body his default value is margin: 8px
and i make it margin : 0 so the image stretching and there is no white places