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%;
Related
image2 is a wallpaper size jpg and image1 is a small image.
Why did image1 scale larger and how do I display it in its original size on top of image2?
html {
background: url("image1.jpg") no-repeat, url("image2.jpg") no-repeat center center fixed;
}
Your question isn't super clear but I will do my best to help.
First I would check out this article about background image stacking it will help you in terms of the order:
https://css-tricks.com/stacking-order-of-multiple-backgrounds/
I would suggest you need to do the following:
html {
background:
url("image2.jpg") no-repeat center center fixed,
url("image1.jpg") no-repeat;
}
You may also need a fallback depending on browser support.
If you can provide a codepen it would help
try something like
html {
background:
url("image1.jpg")
no-repeat;
}
.image2 {
url("image2.jpg")
no-repeat center center fixed;
}
<html>
<div class="image2"></div>
</html>
The answer is html tag background image will always stretch no way around it.
I'm trying to work out how to add a background image to an existing web template, so the image sits at the bottom of the screen.
The template is : http://www.templatescreme.com/free-website-profi-admin
and a demo is here : http://www.templatescreme.com/demo/profi-admin/170
Not sure if I can make this on fiddle, so I've linked to examples of the template.
The template already has a background image (bg.gif) which is the black and grey banners at the top of the screen. I'd like to keep them, but add another to replace the grey background further down the screen.
Normally I'd just change the css on the body to specify the image:
background:url('bg.jpg') 100% 100% no-repeat; background-attachment:fixed; background-position:bottom; background-size:contain;
Obviously doing this will remove the existing image.
Is there any way I can get the two images on the same screen ?
Thanks
update FIDDLE added
I've added a fiddle that shows the issue..the waves should be at the bottom of the screen and fill the full width.
#divid {
background-image: url(../images/bg.gif), url('../images/bg.jpg');
background-position: left top, bottom;
background-repeat: repeat-x, no-repeat;
background-attachment: initial, fixed;
background-size: initial, contain;
}
Something like this should work. Make sure to have values for both images in all properties.
I've got this working, by leaving the existing (original) image in place and creating a DIV 100% x 100% and then applying a background image to that.
I've used:
.test {
position:fixed;
padding:0;
margin:0;
width: 100%;
height: 100%;
background:url('../images/bg.jpg') 100% 100% no-repeat;
background-attachment:fixed;
background-position:bottom;
background-size:contain; }
}
And that seems to have allowed it to work.
Thanks
I having a problem when I view my work in different PCs with different monitor resolution it stretching the the image.
How can I fix this?
.image-bg {
background-image: url("assets/header.jpg");
height:200px;
width:100%;
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;}
<div class="image-bg"></div>
You can change your background-size:100% 100%; to background-size:100% auto; which will scale and crop the image to fit your container size.
Here's a sample jsfiddle:
https://jsfiddle.net/e7g0jknd/
In case you want the image to stick to the top and span downwards, you can use background-position:50% 0;:
https://jsfiddle.net/e7g0jknd/1/
Hope it helps.
The image is stretching because you've specified a height. If you remove the height in your CSS your image shouldn't stretch.
Please use background-size: cover instead of 100% 100% . It will resize propertionally vertically and horizontally read this resources http://www.w3schools.com/cssref/css3_pr_background-size.asp
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;
}
I have this css for my body tag
background: url(images/homepagebg.jpg) no-repeat center;
But it stops short at the bottom of the page. The image is high enough to fill my whole screen.
Any ideas?
The HTML body only covers your entire screen if the entire screen is used up by content.
you can try
body{
min-height: {height-of-your-image-in-pixels}px;
}
I found the solution, I had to add fixed to the end of the background property, eg
background: url(images/homepagebg.jpg) no-repeat center center fixed;