How can i set to a div a background image with a full height (as a cover)?
.index-image-content{
background: ##00aa77;
background-image: url("../images/zenbg-1.png"), url("../images/zenbg-2.png");
background-repeat: repeat-x, repeat;
width:100%;
height:auto;
padding-top:20px;
padding-bottom: 20px;
color:#fff;
}
Thanks in advance !!
Just add those to your class
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
source
This should work normally
.index-image-content{
background-image: url("../images/zenbg-1.png"), url("../images/zenbg-2.png");
background-repeat: no-repeat;
background-size: cover;
}
Related
I have a bootstrap Masthead img thats great when its full size , but as I shrink the page the entire ~25% of the top and bottom get cut off. Of all the things on the page I want this to just scale correctly. I tried width:100% but that don't work
padding-top: 10rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/Am/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Thanks
You could try putting your code into a container div. It may look something along the lines of:
.container {
padding-top: 10 rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/AM/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
}
Additionally, I found this reference for you: similar topic on stack overflow
I think it may help. Your code looks just about the same, however the width 100%, is a bit different! Check it out.
It's located in project/resources/images/banner-landingpage.jpg. The
HTML index file is in the project folder. I cannot get the background to display using:
.banner {
background-image: url(./resources/images/banner-landingpage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100px;
}
I thought the ./ meant go up one file then follow the path to the file?
I believe the standard solution to this is
.banner {
background-image: url('../resources/images/banner-landingpage.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100px;
}
where you go up a directory using ../
Also note that the url will be relative to where the css file is stored.
I want to know how I can see the 100% of a picture in a header with CSS. The problem is that when I add the image to the header, the image does not resize, so I have to make bigger the header, but I don't want that.
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
}
Basically I want to achieve a header with an image resized, so I will be able to see the full image in a header with the dimensions that I want on the header. I am new in CSS. Feel free to ask any question. Thank you.
how I can see the 100% of a picture in a header with CSS
to see a background image in it's entirety, use
background-size: contain;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: contain;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
than id needed you can additionally play with background-position to set it's position
If you want the image to fill the entire header area without distortions use
background-size: cover;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: cover;
background-repeat: no-repeat; /* add this to not repeat it as pattern */
background-position: 50% 50%; /* center it? */
height: 100px;
}
<div class="header"></div>
if you don't care that the image distorts but you want the image to stretch-to-fill than use
background-size: 100% 100%;
.header{
background-image: url("//placehold.it/300x100/cf5");
background-size: 100% 100%;
height: 100px;
}
<div class="header"></div>
Without exactly knowing what you really want to achieve, I think you're trying to do, what the background-size property does.
With background-size: cover; you can force the background image to cover the whole area of the according element (like a div).
Your code example would look like
.header{
background-image: url("../IMAGES/myimage.png");
width: 100%;
height: 100px;
background-size: cover;
}
Just use:
max-width: 100%;
On the css of the image, that will make it be at max, the 100% of the width of the container.
CLARIFICATION
For an image inside the container header, max-width will do the trick. If it's a background image, background-size:contain will maintain the image INSIDE the header, while cover will expand the image to cover the whole header.
.header > img {
max-width: 100%;
height: 200px;
width: 600px;
}
.header2 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: contain;
background-repeat-x: no-repeat;
height: 200px;
width: 600px;
}
.header3 {
background-image: url("https://source.unsplash.com/random/500x500");
background-size: cover;
background-repeat: no-repeat;
height: 200px;
width: 600px;
}
<div class="header">
This is my header
<img src="https://source.unsplash.com/random/500x500" alt="and this is my image inside it" />
</div>
<div class="header2">
This is my second header with a background contained inside
</div>
<div class="header3">
This is my third header with a background covering it
</div>
Im trying to get background image that scales whole image without depending on size of the picture and that fits all screens showing exactly same. I got it to work butafter i changed picture it doesent work anymore. Oh and im using Bootstrap 3.
heres my css:
.bg {
background-image: url(http://pikahinaukset.wpengine.com/wp- content/uploads/2015/06/coverphoto-e1433360465261.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) center center cover no-repeat fixed;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Edited:
heres html http://jsfiddle.net/jw7L2s3y/
You are doing something redundant: background with center and all the stuff then you are doing background-image, background-repeat and all that. It is basically doing the same thing as background: . Remove one of them and i think it is working fine anyways.
Working Jsfiddle here
.bg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(http://pikahinaukset.wpengine.com/wp-content/uploads/2015/06/coverphoto-e1433360465261.jpg) ;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
I have set scrollbars to auto, but still they do appear, although the website's content is minimal. I just can not see, what is wrong here.
CSS code:
html {height: 100%; overflow: auto; margin: 0;}
body {background: url(random_img.php) no-repeat top left fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; margin: 0; height: 100%; font-size: 1rem; font-family: Cabin, Helvetica, Roboto, Arial, sans-serif;}
#stage {margin: 2% auto 0 auto; padding: 0; min-height: 100%; width: 58.75rem;}
Example website: ivanschneider.com
Thank you for your help.
I just had to remove height: 100% from html.