I'm trying to scale a background image on mobile devices such that the height is rescaled to be 100% of the device height, and the width is cropped as necessary to maintain the aspect ratio.
I'm currently using the following code to center and fix the image:
background: url(redlineNoText.jpg) no-repeat center center fixed;
I've tried using background-size: cover, but it results in a very large image with only a small portion visible on a mobile browser.
I've also tried background-size: auto 100%, but it results in no background image.
For an example of the problem, please feel free to view projectredline.org. The desktop view is what we're going for.
Thanks for your help!
Use the units VH for viewport height and VW for viewport width.
A setting I often use for example is this one:
width: 100vw;
height: 100vh;
background: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;
You could also use for example: width: calc(100vw - 100px); to come up with the perfect scale for what you're trying to achieve.
Perhaps background-attachment might help you here?
html,body {
height:100%;width:100% }
body {
background: url(http://via.placeholder.com/1220x1100) no-repeat center center fixed;
background-size: auto auto;
background-size: 100% auto;
margin: 0;
padding: 0 }
#media screen and (max-width:800px) {
body {
background-size: cover;
background-attachment:fixed }
}
<body>
<div>
Content
</div>
</body>
Related
I am using Gatsby and I am trying to edit my CSS to give myself a background image that fills the screen then below that I just want a footer. This does not have the footer but it is a great example of what I am going for.
I have
body, html, #gatsby-focus-wrapper, #__gatsby {
height: 100%;
}
.landingDiv {
background-image: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
However, the background does not extend to 100%. I have tried setting parent containers to 100% in order to get this background to expand. This is what it looks like now.
Here is an image showing the width of the
Here is a Code Pen of this code - https://codepen.io/norogoth/pen/zYwNqWX (updated 3:30pm)
If you want to use it as a background image, you need to make it's container wider and higher to adapt it to the maximum with and height of the screen. Using relative units may work for you. Something like:
.landingDiv {
background-image: url("https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* making it 100% of the total width and height */
height: 100vh;
width: 100vw;
}
vh and vw stand for viewport height and viewport width respectively.
Object-fit: cover instead of background-size: cover;
What I have so far is:
body {
background-image: url("image file");
background-size: cover;
background-repeat: no-repeat;
}
I have found an answer look below.
With background-size:cover, the background will automatically scale with the size of its parent element to cover the entire thing.
In this case, for it to scale larger or smaller, you can set width and height on your body element.
Use this:
background-size: 100% 100%;
I finally found an answer all I had to do was modify one of your answers
body {background-image: url("image file");
background-size: 110% 130%;
background-repeat:no-repeat;
thank you for all your help.
Stretch horizontally and vertically:
background-size: 100% 100%;
Stretch horizontally (preserve image ratio):
background-size: 100%;
background-size: 100% auto; /* This is the same as above (included so you can see the similarities below). */
Stretch vertically (preserve image ratio):
background-size: auto 500px; /* If you use percentage (100%), you must set the height of the containing element. */
Using web responsive design I want to put a big image as background on the frontpage, which always stays 100% width and height. Very similar to https://ghost.org
Here is how I'm trying to do it:
http://jsfiddle.net/Jp5AQ/1144/
div img {
max-width: 100%;
min-height: 100%;
height: auto;
outline: solid 1px red;
}
But it doesn't work correctly. The image is disturbed by resizing the window.
If you want to do this with pure CSS you can use the CSS3 background-size property:
div {
width: 100%;
height: 100%;
background: url(your-image.jpg) no-repeat center center;
background-size: cover;
}
Here is a fiddle demonstration:
http://jsfiddle.net/Jp5AQ/1149/
This is the same technique used on the Ghost site you gave as a reference.
Note that I've given the html and body elements height:100% so that the div stretches to fill the height of the viewport.
You are using <img /> tag.
Call the image through CSS and use background-size: cover;.
Here is the DEMO
Your image will always be the max-width of the browser window; however, the height will not stay at 100% of the browser window because the image on the screen needs to stay in proportion with the original image. As the width of the browser window shrinks, so will the height.Otherwise your image would be skewed.
You can use the property background: cover.
The post maybe be helpful http://css-tricks.com/perfect-full-page-background-image/.
Its hard to do that with an img tag.
it will work a lot better with:
background-size: cover;
background-position: center;
here is a Fiddle of it
just remove the image inserted with an image tag and instead put the image in a div as background.
div: should get height and width of window screen size (most likely with javascript)
insert image with the css style:
div{
background: url(path_to_img/img.jpeg) center center no-repeat;
background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers
}
here is the link for css background: http://www.w3schools.com/cssref/css3_pr_background.asp
and here is the link for background-size : http://www.w3schools.com/cssref/css3_pr_background-size.asp
try this css:
.banner-bg {
background-image: url(../images/header-bannerbg.png);
background-position: fixed;
background-repeat: no-repeat;
height: 580px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
http://jsfiddle.net/aashi/Jp5AQ/1146/
!my present design**i have designed a website like this.
**
it is working fine for my screen resolution. the bottom div is half way up on the background image and half way down from the background image. my problem is when i test this for higher resolution screen it is not looking the same. the image is moving down. this is my css
body
{
background: #ffffff url(../images/11.jpg) no-repeat center top 0%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 75%;
font-family: Arial;
}
the bottom div css
.banner {
width: 100%;
min-height: 300px;
height: 100%;
background-color: #ffffff;
}
how to set this same for all screen sizes.
You say the image is moving down, do you mean when you scroll the image moves but you want it static? If so you could add background-attachment:fixed; to the body's CSS.
That's because the proportion of the image doesn't let the image fit the whole screen.
set the
body {
...
width : 100%;
height : 100%;
}
I have site that I'm laying out. It's basically Header, Content and Footer all 100% width.
I want to have the background image fill the screen in the content section. I achieved this with the CSS3 background-size:cover. The only problem when Im scaling up to a screen that is 2560px the image gets cut off. Is there a way to work around this so that doesn't happen?
My CSS
#maincontentcontainer {
width: 100%;
background-image: url(../images/sandpiperBG.jpg);
background-position:center center;
background-repeat:no-repeat;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
}
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
Will fix it, but the images will become stretched/squashed because you have a fixed height but a variable width.
In order to get background image as full, try this instead:
background-size: contain;