I am creating a login form with an image as a background.
Here is the screenshot :
It looks good on the normal screen. But when I try to open it on 27" iMac monitor, the form looks terrible.
Here is the screenshot from iMac monitor :
Here is my CSS so far :
body.woocommerce-account #main-content {
background-image: url('path/to/login-background-min.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 20px;
min-height: 800px;
}
How to avoid the image stretched? or maybe is it any way to make it respect the resolution?
Thanks.
If you remove background-size: 100% 100%; it will not stretch anymore.
To ensure the entire surface area is covered you should use this.
background-size: cover;
This will maybe result in a piece of the picture will not be displayed.
If you want the entire picture and don't mind some white space on the left and right of the picture you should use this:
background-size: contain;
If you want you can use this so it will always stay centered.
background-position: center;
Related
So I want to do something like this, having an image as the fullbackground of a website.
However, I keep trying and trying with ridiculously huge images (The one on my JSFiddle is 6000 x 4000 I think) and they're all still small and get on low resolution when I scale them to fit the website.
Here is my JSFiddle showing my CSS code.
body {
background-image: url(https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
}
Any help appreciated.
The background cover approach is correct and the resolution of the image shouldn't matter if not for the quality of the image itself (you can have a 400px image fill a 3000px element).
The image will always adapt to fill its container and what I noticed in your fiddle is that the container of the image seems to be the problem, not the image itself.
here's your fiddle, edited with the background element height and width set.
{
height: 100vh;
width: 100vh;
/* Bonus: I think you want your background centered, as in the example that you provided */
background-position: center center;
}
https://jsfiddle.net/edLm73r2/
The image you are used on the example fiddle is very small(768 x 512)
https://snappygoat.com/b/d6249bb487c44ca8e93f4bc0faa46c8f1df7c690
Go for some large image if you want to make it as full screen background. May be use this one from unsplash https://unsplash.com/photos/It0DCaCBr40
body {
background: url(https://source.unsplash.com/user/nolanissac/It0DCaCBr40) #464646 no-repeat;
background-size: cover;
}
It looks like wherever the image is being hosted is not serving the full resolution of the image or quality.
I found the image you are using from a stock image site here and downloaded a re-uploaded so it stays it's full size.
body {
background-image: url(https://i.lensdump.com/i/itbHyH.jpg);
background-color: #464646;
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
background-attachment: fixed;
}
I've got a div with a background image I'm using for a hero image on my website. On my external monitor it fits perfectly and displays correctly.
When I drag the window over to my laptop display the background image is shifted over to the right. I've tried setting background size to cover but this just makes the image repeat.
The div is set to the width and height of the image (1920 x 600) and both screens are set to 1920x1080 resolution.
Is it because my laptop screen has a higher dpi? What should I change to get the image to display correctly on both screens? Would I need to have more than one image?
Edit:
Here's how it looks on my external monitor (correct)
And here's how it looks on the laptop (when i did the screen grab it was actually bigger than the original image size?)
Here's my CSS for the div
.hero-image {
background-color: #679da7;
background-image: url("../images/hero-image.png");
height: 600px;
}
Using background-size: contain / cover doesn't help, it just makes the image repeat on my laptop screen.
Edit 2:
Joe's solution worked. After a bit more googling it seems that despite my laptop display saying it's 1920 x 1080, it's actually only 1535px wide, which is why the image wasn't displaying correctly (it's wider than the screen) - facepalm
Thanks for the help guys.
You should use
background-size: cover;
background-repeat: no-repeat;
on your background-image.
You need to set the position and repeat rules:
background-position: right;
background-repeat: no-repeat;
What is the resolution of your monitor and laptop ?
you can use
background-size : 100% 100%;
background-repeat: no-repeat;
on your div background
Use CSS3's background-size so that the image always fits in any container without being stretched.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: no-repeat;
In using background size property, make sure that you set your background image property like this:
background-image: url('path/to/img');
instead of
background: url('path/to/img');
Depending on the wanted result (not clear in question) you can do two ways.
1) This will keep the image within the div, if the height is heigher than the div, It will leave a empty space there, use a background-color to see it more clear
background-size: contain;
background-repeat: no-repeat;
2) this will always cover the full width and height of the div
background-size: cover;
background-repeat: no-repeat;
Joe's comment on my question worked. I also found out my laptop screen is only 1535 wide despite being at a resolution of 1920.
Thanks all.
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 am using a background size cover for an image I want to display in my homepage full screen when you enter the site.
.image1{
background: url(../img/nike.jpg) no-repeat center center;
width: 100%;
padding: 20px 10px 60px 10px;
height: 100vh;
overflow: hidden;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
However, since the image is really wide, I want it to be all in the screen when you enter the site with a phone. That´s why I have used the following media query:
#media (max-width:600px) {
.image1{
width:70%;
background-size: contain;
}
}
That is working and now you can still see the full image in mobile screens. But obviously it is not filling all the background. It has white space above and below it. So what I want is the text and logo I am going to put to appear in the white space above the image, and not in small size inside the image. I don´t know how to do this since the text and content I am placing is originally inside the div with this image as a background.
The only solution I can think about is to set the margin-top in the media query to -200px but I don´t think this is a very good practice.
You can see the site live in www.text.hdeprada.com It is a simple page with just this issue I am trying to fix.
use backstretch js , it will resolve your problem. Its easy and reliable.
Try scaling the image inside the div with this
background-size:200%;
scale the % to fit your need
My site has to be responsive and I'm supposed to build it "mobile-first".
It's a one page site and each section is divided by an svg image.
So far I've gotten it the width resize perfectly by using background-size:cover; but a small part at the bottom of the image gets cut off. I've tried adjusting the height (auto, 100%, random pixel value) but that doesn't seem to do anything :/
Any ideas?
#breakpink{
background-image: url(../images/break_pink.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
text-indent: -9999px;
}
Full code:
http://jsfiddle.net/duyBE/
Same problem happened for me. There is a solution for this problem that is posted in the accepted answer on this page: CSS: Full Size background image
The solution was to use: background-size: 100% 100%
But there was a drawback, that is when you zoom out the background along with the content, the "body" background appears at the bottom!
Use "background-size: contain" instead of "background-size: cover",
1 background-size : cover
Property value "cover" will make the image to cover available space, if the image is small then it will be scaled up to cover available space, If the image is big then it will be scaled down to cover the available space, in either case, there is a chance that image may get cropped in order to fill the available space.
Pros: It will cover the entire available space.
Cons: Image may get cropped.
2 background-size : contain
"contain" will make the image scale up or down to fit inside the available space.
Pros: Full image is displayed.
Cons: Image may be look stretched. And sometimes you will see empty space around the image.
html {
background: url(../images/break_pink.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will probably fix your problem
I was having a similar problem. I've added a padding-bottom: 10px; and it worked for me.
add a margin at the bottom of the element:
#breakpink{
background-image: url(../images/break_pink.svg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
text-indent: -9999px;
margin-bottom:10px;
}
Had similar issue where the bottom of my header image was getting cut off. Resolved it by using
background-size: contain;
I had a similar issue. It turned out that the image file was damaged in some strange way. Opening the image in the file system worked, the image was OK, but it produced this error in the browser. I deleted the image file and downloaded it again and the image was displayed appropiately with the css rules.
add a min-height property
#breakpink{
// other codes are here
min-height: 150vh;
// to see area of the image
border: 2px solid red;
}
body{
margin: 0;
padding: 0;
background: url(image.jpg);
background-size: auto;
background-size: cover;
height: 100%;
text-indent: -9999px;
margin-bottom:10px;
background-position: center;
font-family: sans-serif;
}