The behavior of my background image is, that the image is always perfectly centered when I resize the browser window. It gets on the top, left, right and bottom the same "distance" to the edge of my browser window.
The CSS:
background-image: url("ipad.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 563.5px 800px;
I have a div overlaying this image and I would like it to behave in the same way like the background image, so that it is always centered above the background image in the same place.
Is that even possible? And if yes. How?
I hope you understand what I want to achive. :)
Thank you very much for your help. :D
It looks like you're trying to center content horizontally as well as vertically, no matter what size the browser window is. If so, try something like this:
Your HTML:
<div class="outer">
<div class="middle">
<div class="inner">
The content that you want centered.
</div>
</div>
</div>
Your CSS:
/* Vertical and horizontal centering */
.outer {
position:fixed;
top:0; left:0;
width:100%; height:100%;
}
.middle {
height:100%;
display:table;
margin:0 auto;
}
.inner {
vertical-align:middle;
display:table-cell;
}
Good luck!
Edit: Here's an example of the above - http://jsbin.com/aguciw
Related
I'm trying to fit a fixed background image properly into a div.
I want the image to
have its left edge be positioned on the divs left edge, even if the div is positioned with margin auto
have a width of exactly the divs size
Both points are problematic.
100% background-size seems to relate to the images original size and not to the div-size. Maybe contain is the correct thing here, but I can't verify that without a solution to problem no 2.
The background-position seems to relate to the complete browser viewport and not to the div.
I have made the image have a proper dimension, so that it should be high enough to cover the visible area when being scrolled over.
Here is a jfiddle: https://jsfiddle.net/417u343f/3/
As you can see, the image is starting more to the left than the start of the div and because of that, it's repeating before the div is at its end.
Thanks for any help, I hope I made my problem clear enough.
<div class="outer">
<div class="test">
<div class="test1">
</div>
<div class="test2">
Text...
</div>
</div>
</div>
css:
div.test {
width: 80%;
margin-left: auto;
margin-right: auto;
height: 250px;
}
div.test1 {
width: 50%;
height:100%;
float:left;
background-image: url('image...');
background-attachment: fixed;
background-size: contain;
}
div.test2 {
width:50%;
float:left;
}
Hello i found a very peculiar thing, apparently left is rendered different from right.
see this fiddle:
http://jsfiddle.net/Hn8At/2/
here is the html
<div id="wraper">
<div id="ribbon_ct">
<div class="ribbon left"></div>
<div class="ribbon right"></div>
</div>
</div>
and the css
body{ margin:0; padding:0px; }
#wraper{ width:800px; margin:0 auto; background:#eee;padding-top:500px;}
#ribbon_ct{ width:100%; background:#c00; height:400px; }
.ribbon{background:#0C9; width:30px; height:30px; position:relative;}
.left{float:left;}
.right{float:right;}
.ribbon.left{ left:-30px;}
.ribbon.right{ right:-30px;}
I have 2 green squares on either side, one causes a scrollbar, the other does not. You can only scroll the right one into view. any ideas as to why?
Its absolutely normal.
If an elements overflows the body from the left, it will be hidden, and from the right it will be scrolled.
use overflow:hidden; on #ribbon_ct if you want the right div to be hidden.
Your #ribbon_ct is 800px wide because of width: 100% of #wraper and centered.
When you don't give width to his parent (for ex: body {width:1000px;}) or widen the viewport you can't see the left green square, because you positioned left: -30px;.
Try your code not in jsfiddle but directly in browser.
And if #wraper was not centered, you can't see left square even when resizing,
This is the image I'm talking about.
http://i.imgur.com/KkH8ryV.jpg
Right now it works as a background of my news content. The brown area is the title, yellow are is the content.
When I write a long text into the content area, the text go out of the div because the picture isn't big enough.
I want to split the image into 3 pieces.
Header
Middle
Footer
Header and footer will always be applied once. Middle has to repeat itself depending on how long the text is.
How can I achieve this in CSS?
PS: You may call the split images "header.png, middle.png. and footer.png"
HTML
<div id="parentDiv">
<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>
</div>
Let's say the Image has a width of 300px.
CSS
#header
{
width:300px;
height:100px;
background-image: url("header.png");
background-repeat: no-repeat;
}
#middle
{ width:300px;
height:400px;
background-image: url("middle.png");
background-repeat: repeat-y;
/*If the width will be bigger than the actual
width of the image, then add:
background-repeat: repeat-x;
*/
}
#footer
{
width:300px;
height:100px;
background-image: url("footer.png");
background-repeat: no-repeat;
}
More about background-repeat.
Note that the image will be repeated, which won't look really good, I suggest that give the middle a fixed height, and use, overflow:auto; which will create a scrollbar when contents exceeds the size.
I have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.
first off here's my current code.
<div id="background">
<img src="src/1080pTux.png" height=100%>
</div>
#background{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index: -5000;
}
The image stays fit to height, maintains aspect ratio, and stays behind everything, but i want it positioned centered at all times. How can I accomplish that and what am I doing wrong?
Thanks!
You may want to use background-image.
You could try somthing like this:
body {
text-align: center;
min-width: 600px;
}
Even though it says text align it will align the whole page in the center since your modifying the whole body to be centered.