I was looking at path.com today and liked their implementation of a dynamically sized cover photo. If you check it out you will see that it sizes nicely no matter your screen size.
I looked a little more into it and noticed the background image is attached to the body tag. I also noticed the body appears to get its size from the form element inside it, meaning the body itself it actually shorter than the total page.
Does anyone know how they accomplish this?
Also, the body height is set to 100% of the viewport.
I think you're looking for this part:
body.home {
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Related
in my Vue Application I have a login page, where I want to show a specific background. I tried to set the background like this:
`<template>
<div class="background"></div>
</template>
<style>
.background {
background: url("./images/background.svg");
background-size: cover;
}
</style>`
Now when I open the browser and watch the inspector, it says that the width and heigt of the div is 0x0. The html and body elements are also set to height 100% and width 100%.
When I define a specific height and width in the css the picture is shown, but I want to make the background responsive so this is no option for me. Does anyone know what the issue could be?
If you insert the below properties it should tell the .background to fill the viewport, this may mess up the aspect ratio. But depending on your needs this can be fixed, the second set of code will prevent the img from showing up more than once and will tell it to keep the original proportions.
Hope this helps
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-attachment: fixed;
I've been fiddling with my background image in CSS for a couple hours now and have tried searching through articles to find a solution but still have nothing. I'm trying to make my background image fit the screen no matter what the browser size.
At first I was using this CSS code which seemed to be working:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
But then when I re-sized the browser this happened: http://prntscr.com/j1d4kv
I then went and found another solution that said I should put the background image in the html tag, which i tried:
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
}
This fixed the issue of the background image not fitting to the bottom when the browser size changed, but then I had this issue when I was full screened: http://prntscr.com/j1d742 It left a gap on the right side!
Most likely your body doesn't reach the full height of the browser window, if it doesn't have much content. Add this to correct that:
html, body {
height: 100%;
}
You want to add,
background-attachment: fixed;
Here's an example: https://embed.plnkr.co/3Y7O1TQa8ssPQKVq0tCW/
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 having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
I'm trying to set the background image using CSS but the original image is stretched.
How do I keep the original image size and set the background for the entire page at the same time?
body {
margin: 0;
background-image: url(background.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The original image is: Original Image
And the result is: Resultent Image
The difference is the background in my web is larger than the original.
Any help would be appreciated !!!
All you have to do is to remove background-size: cover,
then all should be fine.
You have a lot of options regarding the background image and size.
For your needs you can check this W3c and try the different options you can apply.
Remember that since you apply CSS to your Body, all your pages will "follow" those rules. But some of your pages might have different height from the others.
The result also, depends on the screen resolution of the client.
You have to deside what is your desired result in all screen resolutions.
Try to remove background-size:cover; & set width of image to your requirement.
background-size:cover;stretches the image to full background.
or
Please change your image extension from .png to .jpeg or .jpg because .png always stretches your image and after that the css property u have defined earlier will work properly.
What you can do is just remove, background-size:cover;
Now let's see what does that mean,
background-size
Because background-size CSS property specifies the size of the
background images. The size of the image can be fully constrained or
only partially in order to preserve its intrinsic ratio.
cover
A keyword that is the inverse of contain(contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container). cover scales the image as large
as possible and maintains image aspect ratio (image doesn't get
squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions,
the image is clipped either left/right or top/bottom.
To get much identification just try JSFiddle
For the more reference on background-size:
remove background-size: cover;
Thanks.
I found the problem.
the source image is open with a zoom of 35% therefore when I set the backgroud it stretch to 100%.
body {
margin: 0;
background-image: url(background.png);
background-size: 60% 60%;
background-position: center center;
}
Try like this:
.your-class {
background-image: url(background.png);
/* Required Height */
height: 800px;
/* Center and scale the image nicely */
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}