I want to stretch the background image to match the size of the screen
body {
margin-left: auto !important;
margin-right: auto !important;
width: 80%;
background-image: url(hola.jpg);
}
I try to put background-size: 1500px 1500px; and is fixed.
How I can do it and automatic for all pages resolutions?
background-size:cover;
background-position:50% 50%;
Not compatible with IE8 and lower, yours to decide whether you need to support those now that IE11 is already out.
Use this, it should even work if your <body> does not cover the whole window:
background-attachment: fixed;
background-size: 100%;
(Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. [...] If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. [...]
Related
I'm making a website and using a background image in a div.
The background image itself is using "cover" as its size. The div itself has a max width, as does its parent div.
However, when I test on larger screens, it continues to stretch. The divs themselves do not, they stay bounded at their upper levels, but the image continues to grow as the window expands.
I've tried using a width of 100%, which has the same problem. I've tried limiting the img.bg size, I've tried changing the background-size to cover contain and 100% cover, but nothing seems to make a difference.
Here's where it's at right now. On 1920x1080 browsers, the image will stretch all the way to 1920, even though I can only see 1300px of it.
img.bg {
max-width: 1300px;
}
.parallax {
background-image: url("images/headerimage2.jpg");
height: 350px;
max-width: 1300px;
min-width: 650px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The HTML where it's going I invoke with just this:
<div class="parallax"></div>
I have an image that I'm trying to use for my initial parallax styled background that won't change orientation. It's the proper aspect ratio for a portrait, but no way I edit the code or the image itself it won't stop turning.
I've tried using translate code in my css, and I've tried the whole z-index and webkit lines and I eventually learned that those wouldn't work anyways. I don't know what else to try.
.parallax1 {
/* The image used */
background-image: url("me.jpg");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The expected outcome is supposed to be landscape oriented version of a portrait of me. The aspect ratio is correct for this type of image but the photo still stretches and turns portrait.
You might want to create a JSFiddle to demonstrate this, but it's most likely your background-size: cover; value for background property ensures that the image will fill your whole container while preserving the aspect ratio. Because you only defined a height on your container your width is naturally "100%" (because divs are block elements). If your viewport or the container's parent ends up more wide than narrow so will your background image:
https://jsfiddle.net/w4x3bq61/
One way you can tackle this is to set the width of .parallax1 as well so it always have a taller height vs width such as:
.parallax1 {
/* The image used */
background-image: url("");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 300px;
}
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)
I am trying to create a full width parallax site and having an issue getting background images for sections to scale properly.
How would I get a full width image in desktop view to shrink down and contain a 100% width but the height shrink and image contain proportions to fit the width? The problem I am having is I can't set a background container to have a max height.
I'm really looking for a way for the height to shrink from 100% down when the viewport keeps getting smaller so that the focus of the picture isn't lost and maintains proportions just like a responsive image would.
I have tried background-size: contain as well but even then the container has to a have a fixed height which has to change while the background image shrinks because otherwise the image won't be fluid with the container.
#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}
If I remove the height obviously nothing is rendered in the browser and max-height doesn't work like it would for responsive images.
Can someone please help me with this effect?
You need to use background-size: contain instead of background-size: cover. Demo here
#main-photo {
background-image: url('images/main.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}
I found a solution using a padding trick that adds height and allows the image to maintain its aspect ratio. Thank You!
Just add
padding-bottom: %here
You won't need to specify a height for the background image only a 100% width.
Here is a great article. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
How can I make the first page of a one page website full height with a background image like this website? http://avathemes.com/HTML5/De7igner/image.php
Why not use the vh unit?
The vw and vh units stand for the percentage of the width and height
of the actual viewport. They can take a value between 0 and 100
according to the following rules:
100vw = 100% of viewport width 1vw = 1% of viewport width
100vh = 100% of viewport height 1vh = 1% of viewport height
.class_name
{
height: 100vh;
}
Looking at the website in the link provided, they have only put the background image on only a specific part of the website (the countdown time). So if you want to follow them, you can put the required area in a wrapper div and then use the css3 background properties.
.wrapper {
width: 100%;
height: 100%;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
If you want the whole page to have a background, then you can just change the .wrapper selector to body.
I am using the background-size property as in covered in this article http://css-tricks.com/perfect-full-page-background-image/, check it out. Here is the js fiddle http://jsfiddle.net/Br4fZ/ for what you wanted.