I want to have something like facebook cover, I came across this jsfiddle in this community.
.cover { width: 100%; height: 180px; overflow: hidden; background-color: black; }
.cover > img { position: relative; width: 100%; top: 50%; margin-top: -50%; }
But there is a problem when I see the cover image in the responsive mode the image re-adjusts itself! i.e in desktop mode in the bycycle driver's head does not show, but in other small device modes the driver's head is visible.
Question:
How can I make a constant & responsive cover image like facebook?
P.S: Please note that the user will modify the cover image view point just like what facebook does!
You can try using a background-image instead, so you can set:
background-size: cover;
background-position: center;
This would stretch the image to fill the entire element without losing ratio.
See the Updated Fiddle
Related
I am building a react app, and I am writing responsive sass code to make my site look nice. I am trying to make my background image scale, and I am trying to use the background-size: contain; property to do so.
I'm running into a bug I can't fix though... When the background size is set to "cover", the image shows no problem. When I change that property to "contain", the image doesn't show anymore. The image is being loaded according to the console, and I can see it in the inspector as a style on the body where I have it attached. What gives? Why won't the image show? Here's the relevant css.
body {
min-height: 100vh;
height: auto;
width: 100vw;
max-width: 100vw;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
background: center / contain no-repeat url("../img/boulder.jpg");
}
I am unsure with that syntax you are using in the background property but this seems to accomplish the desired result: https://codesandbox.io/s/goofy-nobel-tmvno?file=/src/styles.css:67-138
background-position: contain;
background: no-repeat center url("../img/boulder.jpg");
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I have an image inside a header div. I set the background-size: 100% 100% but on mobile devices, it isn't scaling at all. I'd like to keep the image the same across all devices. Here is the full CSS:
background: url(Oly1600x600.jpg) no-repeat center center;
background-size: 100% 100%;
height: 600px;
position: relative;
overflow: hidden;
I've tried using the background-size: cover and it zoomed the entire image in, cutting off a lot from the top and bottom. What I mean by scaling is, I would like the original image to be shown across all devices, such as desktop browser, mobile device and tablet. If it cannot be shown completely, then the image shouldn't be distorted, i.e stretched. Hope that clears some things up.
EDIT: Here's the link to the page: https://www.heroesjourney.com/olympic-weightlifting
Any suggestions?
Using 'background-size: cover;' should solve your scaling problems, i assume you want the image to fill the container without blank space and that's exactly what cover does.
try this: background-size: cover;
.img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
link:-http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
or
#header img{
max-width: 80%;
}
I have a header image on a wordpress site I'm creating that needs to be the full width of any browser.
The code already existing on the parent theme is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0 7px 10px -10px #000;
width: 100%;
z-index: 0;
height: 300px;
margin-bottom: 80px;
There is also a second style sheet on the theme thats used and inherits most of the styles from the parent stylesheet, where the image CSS on that stylesheet is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
width: 100%;
height: 300px;
I'm not sure why the heading image has two css codes in two stylesheets, but thats the way the theme came, and I'm not a expert in this so that may be normal.
The image is sticking to the original size (1369x325px) even when the width is changed to 100% and therefore cutting some of it out on a smaller browser.
Any help where I'm going wrong would be great, site address: http://biobreak.co.uk/test/services/
Thanks.
The rule in the first stylesheet actually sets the size of the background image with the word cover.
The second rule's width: 100%; setting only sets the width of the surrounding element, not the background image itself (which remains unchanged cover).
So you have to add
background-size: 100%;
to that second rule.
Two way, the first one is to put the image in a relative div and then give the image the following
img {
position: absolute;
width: 100%;
}
or just use the vw unit
img {
width: 100vh;
}
if you're a background image just use background-size: 100%;
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/