I have a background image on header but I want it resizable when the browser is small. When I make the browser smaller the image is getting smaller from sides. I want to see the whole image
header{
background: url(img/img.jpg) no-repeat center center;
-webkit-background-size: cover;
}
You don't really see the whole image all the time but I think this is the best solution as the image will always stay scalable.
Here you can see the difference between both answers given. The background-size: cover and the background-size:100% auto; You have to adapt to your situation.
you can use background-size property in CSS
{
background-size:100% auto;
background-repeat:no-repeat;
}
Related
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 trying to make a CSS backgroun using a picture, but I am failing somewhere. The problem is that when I put a lot of content on the page, the picture gets bigger and the quality goes down. I tried to fix it with Position:fixed but not working. Here's the code:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
Also i tried to put a text-align:justify in the code but didn't work out too. I am messing something up really bad. Would love to get some help!
Cover make :
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
You should use contain instead
Try the
background-size: contain;
Because "cover" means "make it cover the entire box.
You can vary background-size like 50% or 60%
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:50% 40%;
}
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:600px;/*use images height*/
height:auto;
width:1000px;
background-size:100% 40%;
I am trying to display this image in my blog full size : http://i.imgur.com/BruV8Hk.jpg
However it gets cropped ... i don't know why. I have tried rechecking the .header boundaries and I can't see where I would be limiting the size available for the image.
Here is the codepen for the site : http://codepen.io/anon/pen/grLED
Please help
EDIT:
Just to clarify .. I would like my .header container to be big enough to house that image in full
EDIT 2:
so i just did this : http://codepen.io/anon/pen/vJyFn to get the desired result ... can it be done without all those <br> ?
Add these properties to your .header class. But I am not sure if this'll work in old browsers.
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Update
If your height is less then the image height, you will loose dimension ratios. In this case your image will be stretched. You can define width and height like this background-size: 300px 150px; as described here.
Moreover you can use cover and contain options with background-size property. As your container height is less then the image you have to rely on this otherwise set width height screw background image.
For more reference please see this link.
Try setting the background-size.
/* Always cover the container (not a lot of support) */
background-size: cover;
Or
/* Fit width */
background-size: 100% auto;
Alternatively if you want it inside the div with absolutely no cropping you could set this to 'contain' or 'auto 100%' to fit the height.
Hope that helps. :)
Do you need image to be displayed like in this link?
http://codepen.io/anon/pen/grLED
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background: url('http://i.imgur.com/BruV8Hk.jpg');
background-repeat:no-repeat;
}
I've made a small example for you, take a look at this Link it might help you out
There is an CSS3 property called
background-size:cover;
that will do the magic :)
Some more information can be found here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
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;
}
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.