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
Related
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 need to Center and crop image with CSS. I have followed this article.But device UI output is somewhat different. Can you explain the behavior of this?
This is the use case:
We don’t want to actually crop - just display the middle of the image.
Some of the docs people will upload will be docs so don’t want this to
be stretched.
My question is I don't know why it transforms (1 image) landscape mode even though I got the image using portrait mode? Any explanation?
photo {
.photo {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.portrait {
width: 100%;
height: auto;
}
}
}
<div class="photo">
<img [src]="data?.url class="portrait">
</div>
UI:
1 - It shows when I used the device in portrait mode
2 - when I used device in landscape mode
Runtime code:
You can achieve it by
img {
object-fit: cover;
}
It works the same as background-size: cover but it's used for img tags instead of background images
Reference
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.
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%);
}
I am trying to create a page layout with a rectangular div on the left side that's rotated 10 degrees, expands with the size of the browser, and doesn't show its edge on the top, left, and bottom. Meaning, the page should appear to be split in the middle on a slant.
My code so far creates the div properly, but when I expand the page you begin to see the edges.
http://jsfiddle.net/jpQvL/1/
HTML
<div id="wrapper">
<div id="right"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
position:relative;
height: 100%;
}
#right {
background: #000;
transition: all 0.5s ease-in-out 0s;
width: 50%;
position: fixed;
min-height: 110%;
transform: rotate(10deg);
top: -73px;
}
The problem is that the tranform property needs render prefixes. You have to add these lines:
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
take a look at this
or use one of many prefix-free scripts like this one