I have a full screen background image for my website landing page with my logo in the centre. The website uses Bootstrap and is fully responsive. The logo is vertically and horizontally aligned in my browser window and when the window is resized the logo correctly stays in the centre. But when viewing on a phone or tablet the image background images resizes correctly but the logo does not stay in the centre of the page, but is situated to the right of the screen with half of it obscured.
Any ideas on how I might rectify this? The website landing page is live you can find it at www.burnser.com
Here's the code:
<img alt="full screen background image" src="img/bg.jpg" id="full-screen-
background-image" />
<div class="centered">
<a href="work.html"><img src="img/home_logo.png" alt="BB Logo" width="200"
height="137"></a>
</div>
And here's the CSS I'm using:
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Any help would be much appreciated.
Looks fine on my phone. Try another browser and also try to prefix transform.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Btw, 1MB background image is huge. You should blur that noise out to reduce size of image.
Related
<div class="divOverlay">
<div class="div-overlay-content" >
<div class="pointer" ></div>
</div>
</div>
I have the following setup where I have a div with a background image and another pointer that always stays in the center. I want to move the background image dynamically to different positions. I am doing that by adjusting the properties
background-position: 0% 0%;
So if I set it to 50% 50%, then the center of the image is aligned with the pointer in the center. which is fine. But I have to tackle the corner scenarios .for eg:- if the value is 0% 0%, then I should have the top left corner of the image aligned to the center (with white background space where there is no image)
How to achieve this just by using CSS (without modifying the image to add the extra white spaces)?
Here is the link to jsfiddle https://jsfiddle.net/mkd914gf/21/
Here is the CSS
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow-x: hidden;
}
.div-overlay-content{
height: 100%;
width: 100%;
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
background-position: 0% 0%;
}
.pointer {
left: 50%;
top: 50%;
background-color: red;
position: absolute;
width: 10px;
height: 10px;
background-size: contain;
background-repeat: no-repeat;
}
There are a couple ways you can do this, I've seen some people use ::before and ::after pseudos, or the background-attachment property (works with <img> tags, not backgrounds).
I've opted and gone for absolute positioning the entire div. So we have an absolute positioned div, and a relative positioned parent. We set the height and width for each, plus the background image using background-size. Set overflow to hidden on the overlay. Then just use top right bottom left to position the div holding the image.
I also set you up with a centering method for your red dot that takes the size of the dot into account.
Here's the fiddle: https://jsfiddle.net/9sp2te4o/1/
HTML
<html>
<body>
<div class="divOverlay">
<div class="div-overlay-content" ></div>
<div class="pointer" ></div>
</div>
</body>
</html>
CSS
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow:hidden; /* Full hidden */
position:relative; /* Set relative so absolute children are contained */
background-color:rgba(255, 0, 0, 0.5);
margin:10px;
}
.div-overlay-content{
position:absolute; /* Absolute the div for positoning */
height: 100%;
width: 100%;
background-size:cover; /* Cover entire div */
left: -25%; /* position the div instead of the image */
top: -25%; /* position the div instead of the image */
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
}
.pointer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Position while taking dimensions of div into account */
height:10px;
width:10px;
background-color:red;
}
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
<div class = "LeftMain" >
<a href = "#" > <button>Go</button></a>
</div>
.LeftMain{
float: left;
width: 600px;
}
.LeftMain {
background: url(Astronaut.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
I'm creating a mini project, and I am trying to create a button appear in front of a background image, this doesn't really work as it only displays a bit of the top part of the background image along with the button "Go". I have floated the section as its two parts but I'm just talking about the left side for now. So how can I make the full background image appear with the button in the centre of the background image?
Do you mean something like this?
.container {
width: 200px;
height: 200px;
position: relative;
background: url(http://www.indiacrunch.in/wp-content/uploads/2014/11/Astronaut-in-India.jpg);
background-size: cover;
background-position: center;
}
.container button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<button>Go</button>
</div>
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%);
}