Image 1 1920X1080:
Image 2 1400X1050:
As you can see from image 1 i design it at resolution 1920X1080 and it look awesome, but when I open it at resolution 1400X1050 it looks so horrible as like in pict 2. Can anyone suggest me the best solution for this case?
Heres my background CSS:
body {
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color:#245528;
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
background-size: cover;
}
}
If you want to show images in good way in different resolutions then you need to have different images for different resolutions. You can implement it by using srcset:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
Source: Responsive Images: If you’re just changing resolutions
I think the right style for your case is
background-size: contain;
instead of
background-size: 100% auto;
the contain will always keep the image shown in your container element, so when the width or height is too small for the image, it will try to resize the image, so that the entire image is shown(with possibly blank area on the top/left or bottom/right). Instead, the 100% auto will always try to stretch the image to make it as wide as the screen.
Related
I have been working on positioning a background image, but the image is only positioned correctly while the webpage window is adjusted to its minimum width. As I resize the browser window the image is clipped on all of its' side lengths. The photo has a height much greater than its width(1391 x 2471). I thought I might have to incorporate a vertical scroll? The website is being designed for mobile platforms but I will be viewing and designing it primarily on a computer monitor. How might I maintain the images' integrity from Min. Width of browser to Max. Width of browser?
* { margin: 0;
padding: 0;
}
html {
background: url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My CSS code for the positioning of the image was taught to me on CSS-Tricks though it has provided the best results so far. I have added a link to the image encase you would like to view. It is a photo I took myself so I hope the link provided is functional.
You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.
You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.
Here's an example using your CSS settings (except see caveat below):
* {
margin: 0;
padding: 0;
}
html {
--imgw: 1391;
--imgh: 2471;
width: 100vw;
min-height: calc(100vw * var(--imgh) / var(--imgw));
/* make sure the whole height of the image is always shown */
background-image: url(https://picsum.photos/id/1015/1391/2471);
background-size: cover;
}
HELLO
Caveat: you have background fixed in your CSS. Two problems with that: it renders the element unscrollable and in any case it is not properly supported in Safari and makes the background look 'fuzzy' on IOS. So this snippet has removed it.
body{
background: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If I have understood this properly, you want the image to be displayed properly on all the sizes you want?
Well in that case you can use #media query.
#media(max-width: your max width in px) {
/*And here change the height and width so that it doesn't look weird*/
}
I have a website on github pages, which works perfectly on any desktop browser. However, two of my background images will not show up on mobile devices (I've only tested iPad and iPhone, it could just be IOS). I have tried adding media queries to make sure the background-attachment property is set to scroll on handheld devices (I had read this was sometimes the problem). I also have media queries that ensure the images are not too large to load. Here is my html:
<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>
Here's the css:
#image-1 {
background-image: url('imgs/coding.jpg');
}
#image-2 {
background-image: url("imgs/game.JPG");
}
#media only screen and (min-width: 500px) {
/* For mobile phones: */
#image-1 {
background-image: url("imgs/coding-large.jpg");
}
#image-2 {
background-image: url("imgs/game-large.jpg");
}
}
#media not handheld {
.background-image {
background-attachment: fixed;
}
}
.background-image {
opacity: 0.8;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100vh;
height: 85vh;
}
If I change 100vh to 100%, then the images load, but they are terribly stretched vertically. Any suggestions?
You can either:
use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"
Seems iPhones disregard #media rules for handheld devices (See here Do iPhone / Android browsers support CSS #media handheld?
). And giving background-size property of 100% 100% will make the image stretched if the image is not square.
So you can use max-width media query to detect mobile devices and set background-attachment as scroll. And either use background-size: cover or background-size: 100% auto
It looks like you have competing heights with your background-size attribute and your background height attribute. Check out CSS-Trick's post on background-sizes for a better implementation. Since it looks like you want to cover the width of the page with the images, go with background-size:cover instead. Hope this helps.
Use this
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
I need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I'm writing an html page with parallax using stellar.js.
In CSS I use:
html, body {height: 100%;}
#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }
But the image is cut and the bottom of the image is not visible.
Is it possible to set the height of the section (#slide1) to show all the image?
Using background-size:cover; will always crop your background image either vertically or horizontally, except when the element has the exact same h/w ratio as the image. The key is to choose and position the background in such manner that it still looks good when it is cut.
Most likely, you want to give your element a min-height, e.g.:
#slide1 {
min-height: 600px;
}
Keep in mind the most popular desktop ratio is 16:9 and most mobile devices are held vertically. If necessary, use #media queries for different device/viewport widths.
If you don't want your slide to have a larger height than the viewport height (deviceScreen|browser height), add max-height: 100vh!important; to the above rule (useful on mobile devices).
Try setting #slide1 height property to 100% instead of using auto.
I'm new to responsive design and CSS. It seems like a simple question but I can't get a straight answer from Google. I have tried http://css-tricks.com/centering-in-the-unknown/ The ghost block works perfectly but it leaves me a white background colour. Now I'm stuck. Basically, I have a logo size 534x385 and I want this logo to be centered on any devices. In the case of mobile phones I would like this logo to shrink to match the screen size as well.
<div>
<img class="logo" src="images/shapes-logo.png" />
</div>
.logo {
position: fixed;
top:15%;
left: 50%;
margin-left: -267px;
}
html {
background: url('../images/shapes-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's my CSS so far. But if I do this the margin-left: -267px will cause problems in mobile devices.
Resizing the Object
To change the CSS property when the screen resizes, you can use
element {
width: 100%;
height: 100%
}
You can specify your own values too to make them work. This way, everytime the screen shrinks the object or element gets smaller.
Other way, to get the mobile and tablets to get to work is the usage of CSS3 (Media Query)
Like this:
#media only screen and (max-width: 400px) {
/* here comes the trick..this is the css, which would be applied to all
* the devices whose screen has a max-width of 400px..
*/
}
You can then set some properties for it, lets say you can change the image width to
img#logo {
width: 50px;
}
So that, for smaller size screens the image width is just 50px.
Note that, this is also applied if the browser on desktop gets a width of 400px! This way, if the browser gets resized down to 400px width, the image will shrink to fit the place. In other words. Media Query is the best option to change the CSS properties depending on screen sizes. And again, you can use width: 100%.
To make the percentage thing work, you should use a container, such as div This way, the img will inherit the width of div and fill it. For example, if the div that wraps the image has 400px width, the image with width: 100% will have a width of 400% and so on.
Centering the Object
The best method to center the object is to use margins. But not custom ones, but the browse generated.
Lets say, you want to align some image in the center of the page horizontaly, you can achieve that using max-width: 100px and margin: 0 auto. Like this:
img#id {
max-width: 200px;
margin: 0 auto; no vertical margin, auto horizontal margin
}
This way, the object will be placed in the center and the browser will automatically generate the margins for it. The max-width is to make sure, that it takes just the space it needs to. I created a site a fews days ago, you can check the image at the end of the page here: http://www.aceinternationals.com
You will see the image was never provided any code that has to be kept in mind, it is just max-width and margin. So when ever you use the browser resize function, the image will always come to the center.
White background
White background might be because of the image's bckground color, or the background-color of the body! That might be inherited by the user agent (browser). I am not sure, why that happened! Sorry :)
Reference:
http://css-tricks.com/css-media-queries/
Good luck :)
My opinion is to add addition class with logo in html.
like:--
<p class="classname"><div class="logo"><img /></div></p>
.classname{ text-align:center; width:100%; }
This will always keep your logo in center.
if it won't solve. use these with above css.
margin-left:auto;
margin-right:auto;
And also add:
.logo{ max-width:100%;}
.logo {
width:33%;
background: url('your_logo.png');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
your container:
html {
margin:auto;
}
You can try doing something like this. If you post a link I can better help you.
You should simply use max-width:100% for your image. It will keep the image responsive.