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;
}
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'm trying to create a webpage. I'm having a little difficulty
with getting my background picture to show up. I had it up and running, but I decided I wanted to give it a responsive design, and I can't figure it out. This is my code for the image:
<style>
body .title_img {
background-image: url("SplashScreen.jpg");
height: auto;
width: 100%;
background-position: center;
z-index: -1;
}
</style>
<div class="title_img">
<!-- Background Splash Screen -->
</div>
If I give the height/width a definitive size (pixels) it shows up. I don't understand why 100% width with auto height wouldn't give me a picture that is 100% the size of the body (which I THINK i have made sure it was the 100% of the html document) and a height that is automatically proportional to the width. Can someone explain what I'm doing wrong?
EDIT- Added the HTML code.
Full-Page Background Images
I think what you are trying to create, is a full-page background image for your website. Based off of reading the code you provided, I believe you want something that does the following:
Fills entire page with image, no white space
Scales image as needed
Retains image proportions (aspect ratio)
Image is centered on page
Does not cause scrollbars
As cross-browser compatible as possible
Isn't some fancy shenanigans like Flash
If that is what you are trying to create, then I found a few lines of code that could help. Here is an example of how you could go about doing this with your image using css:
CSS File (That's where the magic happens):
html {
background: url("SplashScreen.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Just make sure your html file is setup correctly to use the css file, and it should create a cool background image you can use for your websites.
You can read more into this here and learn more about what makes this work.
Try setting height: 100% in body and html in your css:
html, body {
height: 100%;
}
And then put background-size: cover in body .title_img:
body .title_img {
background-image: url("SplashScreen.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
See reference here.
Use
background-size: cover
or
background-size:100% 100%.
with
background-repeat: no-repeat
That will set it to 100% of its container.
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
I am just trying to set my background but this image will not work. It is between 15 to 20MB in size so I tried to turn it into 5MB. Still no luck. I made a really small image, 25KB size, and that worked but just repeated. My localhost will not show big images either. Is there some limit? What do I need to do to get a full image page?
body {
background-image:url(background.jpg);
}
Do this to avoid repeating the image:
body
{
background-image:url(background.jpg);
background-repeat:no-repeat;
}
You can also experiment with background-size: cover like this:
body
{
background-image: url("http://www.google.com/doodle4google/images/carousel-winner2012.jpg");
background-repeat: no-repeat;
background-position: center center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
Here's a demo at JS Bin with a beautiful Doodle 4 Google as the background image to test the behavior:
http://jsbin.com/ivexah/2
you need to assign a width and height to body.
for example:
html, body {
width: 100%;
height: 100%;
}
You can use the shorthand background css property:
background: url(background.jpg) no-repeat;
Also your body might not have a height of 100% because there's no content on your page. Either give your html and body a height of 100% or add more content to your page.
To make a background image cover its entire container use background-size:
background-size: cover;
IE8 and lower don't support this. For those browsers you need a javascript fallback. There's an excellent article on css-tricks.com that shows different techniques.
You shouldn't have any "size" limitation on your background image. More than likely, you're file is so large that you are not waiting long enough for it to load OR you have not set a width and height. Without the dimensions, the element tahat you are trying to load the background image will essentially have a size of 0px x 0px. See the following jsfiddle example:
http://jsfiddle.net/GymxW/1/
The HTML:
<div class="container"></div>
The CSS:
.container {
width: 400px;
height: 100px;
background-image: url(http://dummyimage.com/400x100/4d494d/686a82.gif&text=background+image);
background-repeat: none;
background-position: 0 0;
}
IMPORTANT: If you are wanting to have an image that is "stretched" to the full size of the viewport, a simple solution is to use a plugin, such as Backstretch.
I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.
My css is
html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }
Any idea of how I can fix that?
Here is a great resource on that topic.
http://css-tricks.com/perfect-full-page-background-image/
Hope it helps.
Like the CSS-Tricks article explained, you could change the CSS to:
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.
Alternatively, try just using:
height: 100%;
or
width: 100%
depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.
Try applying the background image to the html instead.
Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.