I am currently trying to design a long scrolling website using bootstrap and I can't find a way to actually to place more than one image without them actually overlapping each other. What I'm looking for is something similar to this
https://www.flickr.com/
Any help would be much appreciated.
This is the CSS I used to make the image full screen but for some reason everything I add after that will just pile up on it and not underneath it.
.bg-img{
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Edit: made code visible
When positioning an image to be absolute it does not take up any space in the flow. This way it hides whatever comes after it.
One solution would be to add a wrapper and also use viewport units. Here's a JSFiddle
.wrapper {
height: 100vh;
width: 100vw;
}
.bg-img {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
Absolute is your issue here, this takes everything out of flow so none of the elements are aware of each other. Try floating or diplay: inline-block etc.
Related
Ages ago, I copied and pasted approach 1 from this answer by Josh Crozier to center a div vertically and horizontally:
.container {
width:100%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
For result, see image, below left. But now I need the div to align top, instead of center/middle. I've tried 4 different changes to the css (see image):
Change top: 50% to top: 0. Result: top 50% of div is off the screen;
Delete all transforms, change top: 50% to top: 0. Result: 50% of div is off the screen at right;
Change top: 50% to top: 43%. Result: div aligned top;
Delete all transforms, change top: 50% to top: 43%. Result: 75% of div disappears bottom right.
I'm happy that 3) worked. But I have no idea why 43% is the magic number. Maybe it isn't exactly. I arrived at it by trial and error, load and reload. Is there a better way to do it?
It's working like that because you are changing the coordinates of the object with the translateY property. If you delete all of the translateY properties or set them to 0 like this: translateY (0); and add top:0; it will align to the top of the window.
You can read more about how translate works here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
Here's how your css should look:
.container {
position: absolute;
top: 0;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
I have a background image with some objects like a company logo. This image is a full screen background and I want to align an element with the company logo and make it responsive.
I have searched for some similar solutions and tried using a solution proposed in this link:
How to position an element relative to the background image width
Although I am able to position the element correctly, it doesn't remain in the same place relative to the image when the screen is resized.
How can I keep this html element always aligned?
body {
width: 100%;
height: 100%;
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.container{
position: relative;
}
.fixed-title{
position: absolute;
top: 0;
margin: 28% 0 0 54%;
}
<div class="container">
<h1 class="fixed-title">Apple</h1>
</div>
Edit: Coupled with what I wrote below, this should be what you're after :) All that is left to do is change the percentages to match the position you're after. If you need to move something in px you can use calc() css function to do
height: calc(100% - 100px);
This would make your thing 100% of the height - 100px.
body {
width: 100%;
height: 100%;
position:relative
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.title-container{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
<body>
<div class="title-container">
<h1>My Title</h1>
</div>
</body>
It looks like you are halfway there already having used postionion:absolute already.
I would suggest instead of using margin:28% 0 0 54% to look into using the transform property coupled with translateX() and translateY() or the shorthand version translate( , );.
The solution below puts your title in the very center of the container.
.fixed-title{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
This solution only centers your h1 on the Y axis (up and down)
.fixed-title{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This solution only centers your h1 on the X axis (left and right)
.fixed-title{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hopefully this helps :)
P.s. Here is a link to a great article on all the uses for the transform property : https://css-tricks.com/almanac/properties/t/transform/
I started to code last week in php/html/css and for this reason I'm not an expert in web programming. My goal is this picture:
So, I will use this picture as background-image in a separate css file (naturally without the two "input text"), up to now no problem. My question is, started from this picture, how can insert the two input text "Inside" (I know is not the correct world but I don't know exactly which is, sorry for this) this picture? Which way should I follow?
Sorry again if the question format is not correct, but I a newbie of web programming.
I made you an example pen take a look at this Codepen
Good luck!
<div class="container">
<div class="inputs">
<input type="text" /><br />
<input type="password" />
<input type="submit" value="Login" />
</div>
</div>
CSS
* {
box-sizing: border-box
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-image: url(http://wallpapersrang.com/wp-content/uploads/2015/12/black-jumpman-logo-jordan-wallpaper-tumblr-backgrounds-cool.png);
background-size: cover;
}
.container {
width: 100%;
height: 300px;
background-color: rgba(255, 255, 255, .5);
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inputs {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
you can do such things in many ways using background image and opacity. anyways for you reference i am sharing quick implementation here
im creating simple website. On desktop, whole content is centered ok. It works also with changing size of browser.
But when I visited it on mobile, everything is not centered like on desktop
Take a look: http://piaskownica.lokalnamanufaktura.pl/metod2/
I think that my css wrap class for centering is buggy. Videobackground also is not centered on desktop.
.wrap {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
}
.x2-horizontal has a width of 380px that is too wide for small screens. Watch out for fixed widths in responsive designs.
Your layout method is not ideal. For a start, think of devices that don't support transform.
The video control won't center using margin: auto because of position: absolute. You'd have to use the same kind of centering methos as for the other content (i.e. left: 50% and then pulling it back 50% of its width.)
The issue is that the wrap is getting crushed too small to contain all of the elements. Perhaps you could use a media query to reduce their size on mobile. A simple solution for this case would be
#media (max-width: 600px) {
body {
zoom: .8;
}
}
which would reduce the size of the whole body to 80% so that it doesn't overflow and wrap to new lines. In addition, if you want to center your background video, try changing the bottom and right to 50% instead of 0 in the #video_background, and also add your transform lines onto that.
#video_background {
position: fixed;
bottom: 50%;
right: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(50%) translateY(50%);
}
This should be a very simple problem you would think. I have a box with some title text that I want to rotate -90 degrees. I would like it to be absolutely positioned so that the end of the word is nudged into the top left corner. I can get this to align to the bottom easily enough, but the problem is that with variable length text it seems impossible to have it consistently stay within the container when aligning to the top because things like {top: 0} operate on the title before the transform. For my purposes this only needs work in Firefox. I can use javascript if that is the only solution, but you would think this could be done with just CSS.
You should use transform-origin to adjust the transformation point, along with some creative use of positioning properties.
http://jsfiddle.net/thirtydot/JxEfs/1/
CSS:
#box {
padding: 30px;
position: relative;
border: 1px solid blue;
}
#box > div {
border: 1px solid red;
position: absolute;
top: 0;
right: 100%;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: right top;
-moz-transform: rotate(270deg);
-moz-transform-origin: right top;
-ms-transform: rotate(270deg);
-ms-transform-origin: right top;
-o-transform: rotate(270deg);
-o-transform-origin: right top;
transform: rotate(270deg);
transform-origin: right top;
}
HTML:
<div id="box">
hello
<div>rotated!</div>
</div>
Can also work without right:100%
Just rotate 270 deg around left top and then translate it back at new 100% width.
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
http://jsfiddle.net/zW7SP/