I have two background images that i would like to place on the left and right side of my wrapper div. I am using CSS3 background-image property to do this but it is not working. Can anyone make sense as to why this is not working in any browsers. I would also like to know once i get this working on modern browsers will it work on older browser like IE 7?
Here is a visual of what i'm trying to accomplish i've have the navigation (green banner) already in place so i need to put the tricky red banner on and circle background.
I thought slicing the edges of the red banner along with the circle background and applying the code below would work but it does not being that I need the sides to stay flush to the sides.
body{
background-color:#e5e5e5;
background-image: url("../img/background_left.png"),url("../img/background_right.png");
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
}
Add height to your <body> and it will work - DEMO
html, body {
height: 100%;
}
body{
background-attachment: fixed, fixed;
background-color: #e5e5e5;
background-image: url(http://lorempixel.com/300/200), url(http://lorempixel.com/200/300);
background-position: right top, left top;
background-repeat: no-repeat, no-repeat;
}
But it won't work in older IE-s - multiple backgrounds support
Related
I have a background image on the body of my page that should be centered vertical and horizontally and covering the canvas.
body {
background: #000;
overflow: hidden;
background: url(background_phone_2.jpg) no-repeat center center fixed;
background-size: cover;
}
In Chrome/Firefox and all mobile browsers, the image is centered both vertically and horizontally and covering the canvas. In Safari on desktop, the image is slightly below vertical center. Am I doing something wrong or could this possibly a browser bug?
The live url of this is: http://moonios.com
I've tried removing the overflow: none as well as removing the other contents of the page, but the issue persists.
If you have any advice or can confirm this bug, I'd appreciate it. Thank you! Charlie
Update: Did a little more work into figuring this out. Built this new page with a grid: http://whyamicrazytoday.com/safari/
The entire page contents are:
<html>
<head>
<title>Safari Background Size Bug</title>
<style>
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
Still reproduces only in Safari.
Then I remembered the translucency effect in Safari's nav bar (although I have it turned off). I believe Safari is considering the body area to cover that top nav bar which throws off my vertical centering since the content of the page does not get considered in that way. Is there a way to disable that effect from the dom?
Try it with only these properties;
background-image: url(background_phone_2.jpg);
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;
That should work.
If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.
Other than that try:
background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.
body{
background-repeat:no-repeat;
background-position: center center;
background-image:url(background_phone_2.jpg);
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
min-height:100%;
}
I hope it helped.
After attempting to do a browser hack and targeting Safari with special CSS to fix this, I checked in El Capitan and this behavior is corrected. So I'm going to abandon this issue.
.news-header {
background-image: url(maureske_green_left.gif), url(maureske_green_body.gif), url(maureske_green_right.gif);
background-position: left, center, right;
background-repeat: no-repeat, repeat-x, no-repeat;
height: 31px;
}
This works good but the repeat-x of maureske_green_body.gif makes maureske_green_right.gif to not show up.
Setting a width doesnt make the right image to show neither.
If I do no-repeat on the center image all images show up but of course theres a gap between all three. So how do I fix without making center image same width as webpage?
Thanks in advance!
Jarosław
Top image layer is first in your css, so you need to reorder them this way:
background-image: url(maureske_green_left.gif), url(maureske_green_right.gif), url(maureske_green_body.gif);
In short version your new css will be:
.news-header {
background: url(maureske_green_left.gif) no-repeat left top,
url(maureske_green_right.gif) no-repeat right top,
url(maureske_green_body.gif) repeat center top;
height: 31px;
}
Interesting article about multiple css backgrounds here
I would like to use 2 images as a fixed image's background image so I used the code on the body.
background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;
I need them to fit the browser width 100% and I want image 2 to stack vertically after image 1. I have read quite a few websites about using multiple images with CSS3. Is this possible without JavaScript and if so why do my images stack on top of one another and image 1 doesn't start at top left?
the following reference css try it
#idName {
background-image: url(image1.png),url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
You need to set the vertical size to 50% or so, else every images takes all the height
body {
background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
background-size: auto 50%;
background-repeat: no-repeat;
background-position: top center, bottom center;
}
fiddle
So I've got a body with a CSS gradient background. Then I've got an absolute positioned div nested just within that with a background overlay. In turn, the content wrapper div is then nested within this. I want background div to be fixed and the web page to scroll over the top. The problem is, when the page scrolls the background overlay div kind of disappears like a roller blind...
Here's my fiddle to demonstrate the issue... http://jsfiddle.net/WPk6h/ (try scrolling the result pane to see the effect I mean).
HTML....
<body>
<div id="bgwrapper">
<div id="wrapper">
Content...
</div>
</div>
</body>
and CSS...
body {
background-color:#fcf
}
#bgwrapper{
position:absolute;
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
#wrapper {
width:300px;
margin: 0 auto;
}
Any ideas how to prevent this so that the background overlay remains visible at all times?
note... I've not tested it heavily in all browsers yet - the issue is in the first browser I've been using, Chrome so I haven't got round to testing in others yet.
EDIT...
People are wondering why I don't just apply the background image to the HTML or BODY tags - well, there is a clash between CSS gradients and background images - you cannot have them both in the same element, as can be seen with the two examples below. This is why I'm using an additional background wrapper div to create the effect of an 5% alpha image overlaying the gradient bg.
http://jsfiddle.net/tqbtm/ (attempting to add gradient and bg image to body tag)
http://jsfiddle.net/ca5wa/ (adding bg image to bg wrapper div over the body gradient)
You need to remove position: absolute from #bgwrapper div:
#bgwrapper{
width:100%;
height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
Update jsfiddle
You could also have a look at the following link:
http://css-tricks.com/perfect-full-page-background-image/
which details several different methods of doing full-screen, fixed, backgrounds
the method I currently use is method 1 (CSS3) for this kind of technique
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
As Doug told you just add background-attachment:fixed; background-size:cover; width:100%; height:100%; to your #bgwrapper style.
Set the Position to be fixed
position:fixed
In ...
#bgwrapper{
position:fixed
top:0;bottom:0;left:0;right:0;width:100%;height:100%;
background: transparent url(http://www.freesmileys.org/smileys/big/big-smiley-001.gif) no-repeat right bottom;
background-size:cover;
background-attachment:fixed;
}
I want to give my body a background that is fixed in the middle.
So that when I shrink my window it won't start cutting the right-side and keeping the left side static. I want it to cut left and right at the same time.
I want it to be like this example: www.everythingisnew.pt
In that website you can clearly see that the background gets "eaten" by the window at the same time from both sides.
What is the css behind it?
Specify background-position: center in your body element's CSS:
body {
background: url('your/background/src.png') no-repeat fixed center
}
This may solve your problem
background-image: url(src.jpg);
background-repeat: no-repeat;
background-position: fixed center;
background-size: cover;