How to set one background till half of the page and another background from half of the page till the end, while content div remains in exact middle of the page?
Please add an example!
<body><div id="right"><div id="content"></div></div></div>
css
body{ background:url("../a.gif") repeat-x scroll left top transparent;height:632px;}
right{background:url("../r.jpg") repeat-x scroll right top transparent;margin-left:50%;width:100%;}
content{width:980px;}
Problem - backgrounds is placed ok, but content div isn't in the middle of the page ....
ANY SOLUTIONS?
without css3:
html
{
background: url(...) x y repeat;//x and y for wherever it needs to start, repeat can be any value, up to you.
}
body
{
background-image: url(...) top left repeat-x; // or no-repeat if you only want it once
}
With css3:
html{
background: url(http://placehold.it/50x50) top left no-repeat,
url(http://placehold.it/50x50) top right no-repeat;
}
http://jsfiddle.net/jfkqd/
Center horizontally with
.content{
margin:0 auto;
width:200px;
height:200px;
}
(needs a text-align:center; to work in ie)
To center horizontally and vertically:
.content{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
Related
I want a website to have a background color, and a background image that scales with the width, and keeps the aspect ratio. So far pretty easy:
body {
background-attachment:fixed;
background-color:#ff9999;
background-image:url(https://i.redd.it/x7hdjnmupu901.jpg); // random image from google search
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
}
Now, is it possible with CSS to have the background image to the bottom side 'fade into' the background color? As in, have the bottom 50 pixels of the background image slowly lose alpha value, so it smoothly goes into the background color?
Here is a JSFiddle, if someone wants to see this / play around with it: http://jsfiddle.net/wkz1t2b3/5/
You could use linear-gradient to apply a second background-image, which is a gradient of your background color from 0 opacity to 100% opacity.
You can edit the 75% in the below linear-gradient to change the point at which the fade begins, and the 100% to adjust the point at which the background-color becomes fully visible.
body {
background-attachment:fixed;
background-color:#ff9999;
background-image: linear-gradient(to bottom, rgba(255,153,153,0) 0%,rgba(255,153,153,0) 75%,rgba(255,153,153,1) 100%), url(https://i.redd.it/x7hdjnmupu901.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
}
I'm afraid, if you want the fadding be attached to the background image in any screen size, you will need to add some extra elements, and be tricky with the CSS
But it still behaves as a background ...
Test screen resizings in : http://jsfiddle.net/wkz1t2b3/77/
body{
margin:0px;
background-color:#ff9999;
color:white;
}
#background{
width:100%;
position:fixed;
z-index:-1
}
#background img{width:100%;}
/* the body fade becomes visible only when the image is bigger than the viewport */
body::after{
background-image: linear-gradient(to bottom, transparent, #ff9999);
content:'';
display:block;
height:50px;
bottom:0px;
position:fixed;
width:100%;
z-index:-1;
}
#background::after{
background-image: linear-gradient(to bottom, transparent, #ff9999);
content:'';
display:block;
height:50px;
bottom:0px;
position:absolute;
width:100%;
}
<div id="background">
<img src="https://i.redd.it/x7hdjnmupu901.jpg">
</div>
It behaves as a background
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
I'm attempting to create a frosted glass effect using 2 images, one is the background of the page and one is the background that looks frosted. To achieve this i use the following code:
body {
background: url(interferentie.png) no-repeat center center fixed;
background-size: cover;
}
#centerlogo {
width:600px;
height:200px;
background:url(interferentie_lensblur.png) center center fixed;
background-size:cover;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-100px;
position:absolute;
}
In firefox, this works fine. But in chrome, the background of the div doesn't get centered. You can see an example here: http://www.wavelengthfestival.nl.
In chrome, it appears that the background of the div simply starts where the div starts. does anyone know of a solution for this problem?
#centerlogo margin-left:auto margin-right:auto
Repeat-x property for CSS is not working as required.
I have a 50px image (to be used as background image).
I take a 200px div and set the 50px image as background with repeat-x css property.
The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.
css property:
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
from above link you may find correct background image
There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.
From your above code, For Instance,
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}
EDIT:
As per the updated fiddle provided by the OP, below is the solution.
WORKING DEMO
The CSS Code Change:
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>
Hope this helps.
try this one
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}
http://jsfiddle.net/c9j2D/7/
here is my css by which i position one image on at center.
.BusyStyles
{
background-image: url('../images/busy.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
can i enhance the above css as a result i can place another image at center on the div just below the busy.gif......is it possible? if yes then please give me the css by which i can position two image as background for div at center one after one. thanks
Check sample for two background image in a single div tag.
CSS:
.container{
width:300px;
height:150px;
background:url(http://img.b8cdn.com/images/icons/loading_large_icon.gif) no-repeat 50% 28%, url(http://twitter-badges.s3.amazonaws.com/t_logo-a.png) no-repeat 50% 60%;
border:1px solid #CCCCCC;
}
You can only do this in CSS 3 (http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css)
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
I agree with LiamB's solution to this if you have the ability to only support browsers that are compatible with CSS 3.
However, if you need to support more browsers than that I recommend you solve this problem by having 2 divs. Both divs will be positioned on top of each other. The div positioned below contains only a background image. The div positioned on top contains another background image (positioned to look as if it is below the background image from the other div) and any content you want to have.