Here is my tried css;
css:
.main
{
width: 65%;
background:url("../slice/body-bg.jpg");
display:block;
float: left;
margin-left: 0px;
min-height:100% !important;
height:auto;
padding: 0px 12px;
}
Here is sample output screenshot: http://s18.postimg.org/q5zi9g7mh/untitled.jpg
I used in html {height:100%;} and
.main {min-height:100%; height:auto;}
But still it didn't work for me.
Can anybody help me to fix this?
Any help would be highly appreciated.
Thanks.
See example: fiddle
HTML
<div class="main">123</div>
CSS
html, body{width:100%; height:100%;}
Just use:
html,
body{
height:100%;
}
.main{
height:100%;
}
Adding height:auto; after height:100%; superceeds it.
add background-size:cover
.main
{
background:url("../slice/body-bg.jpg") no-repeat center center fixed;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the HTML element (better than the body as it's always, at least, the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
just try this:
html {
background: url("../slice/body-bg.jpg") no-repeat center center fixed;
background-size: cover;
}
Related
.jumbotron{
width:100%;
height:50vh;
background: url('longboard.jpeg');
color:white;
}
I'm trying to build a "jumbotron" from scratch. Currently the html for it is just a with nothing in it. As of right now the picture simply cuts off on the right side while my navbar scales downward. i would like the background picture to also shrink with it. How do I go about doing this?
Also whenever I add a or anythign to the div a margin appears above my navbar which I didn't thing was connected. Sorry in advance if i broke any posting etiquette, this is my first post on here.
Maybe try this:
.jumbotron {
background: url('longboard.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 50vh;
width: 100%;
overflow: hidden;
color: white;
}
Resource - https://css-tricks.com/perfect-full-page-background-image/
The simplest way is to set the background size to "cover"
.jumbotron {
background-image: url('longboard.jpeg');
background-size: cover;
height:50vh;
color:white;
}
I need help regarding background image size scaling.
code: http://codepen.io/AnilSimon123/pen/JRBRZa
here i have kept
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% auto;
height:700px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
}
As you can see the image has dimensions 588 x251 px.
I want the image to stretch along the width but keep its original height,all the while keeping the height of the container as 700px. The height of the image is dynamic.
Thanks and regards,
Anil Simon
Try using background-size: cover
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
min-height: 251px;
width:100%;
background-position:top center;
background-repeat:no-repeat;
background-size: 100%;
}
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat top left;
background-size:100% 251px;
width:100%;
height:700px;
}
<div class="bgimage">
this is test
</div>
Use the background-size: cover instead background-size:100% auto;
background-size: cover :
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
Background cover works just fine.
background-size: cover;
But don't forget to add also the background-position to fixed and center.
For more details you can check https://css-tricks.com/perfect-full-page-background-image/
Hope it helps
.bgimage{
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-attachment: fixed;
background-position:top center;
background-size: cover;
-webkit-background-size: cover;
height:700px;
width:100%;
color: #fff;
text-align: left;
background-size:100% auto;
background-repeat:no-repeat;
}
i think this is what you want
Try adding a container around your div with a height of 700px and add the bgimage on another div that is positioned absolute(so it doesn't affect anything else), height 251px and z-index:-1 to send it to the back. Also to stretch it set the background size to 100% 100%. Hope this helps
.container{
height:700px;
width:100%;
}
.bgimage{
margin:0;
position:absolute;
z-index:-1;
background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
background-size:100% 100%; height:251px;
width:100%; background-position:top center;
background-repeat:no-repeat;
}
<div class="container">
<div class="bgimage"></div>
this is test
</div>
.bgimage {
background: url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat center top;
width: 100%;
height: 700px;
background-size: 100% 251px;}
I am trying to make a background image cover the whole screen width and height, and I can't seem to get it right with the height.
I am following these tips to achive it but I don't get it right. It just goes as high as the inner div content can go.
This is the html and css, you can see it in jsfiddle as well:
HTML:
<div class="navbar"></div>
<div class="background-container">
<div class="bg">
<div class="container">
JOIN US!
</div>
</div>
</div>
CSS:
.navbar {
height: 50px;
}
.container {
text-align: center;
padding: 10px;
color: #fff;
}
.bg {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Body tags are not full-height by default. You need to specify that.
html, body {
height: 100%;
}
Demo
To prevent the resulting scroll, remove margin and and padding as well.
Demo 2
If feasible please add position: absolute; width: 100%; height: 100% to your .bg class.
The problem is the .bg is just that container you see. If you want the background like you are describing change .bg to body and it works
body {
height: 100%;
background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
//add this if you want it to stay fixed
background-attachment: fixed;
}
or you can make the .bg position absolute or fixed so it'll take 100% height.
The default html gets a margin so it will not stretch till the end, so add margin:0 and padding: 0, for stretching till the corners of the browser. Next the width:100vw; implies that 100% of your viewport width so as to make a responsive webdesign, similarly height:100vh; 100% of the viewport height
Add a CSS rule
body, html {
margin:0;
padding:0;
height:100vh;
width:100vw;
}
I would like to make a background image move as the use scrolls and it is normal to use
background-attachment:fixed;
But the issue is that it is stretching the image and I am not able to position it anymore.
http://jsfiddle.net/5c3b56a7/3/
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
}
.container2{
background-attachment:fixed;
}
You can see the issue better on full screen
http://jsfiddle.net/5c3b56a7/3/embedded/result/
First image is position center top
second one cannot be positioned due to the attachment.
Is there any way to do this?
Unfortunately you cannot use background-attachment: fixed and background-size: cover together.
When background-attachment: fixed determine background image to behave like position: fixed element, background-size: cover forced it to calculate background size relatively to the element itself.
Still you can use JavaScript to calculate background position in window.onscroll() event.
Maybe I misunderstood the problem. Here is my variants as I realized that I want to get a result.
http://jsfiddle.net/p507rg68/light/
HTML
<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>
CSS
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}
.container2{
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
.push{
margin-bottom:800px;
display: block;
width: 100%;
height:1px;
}
use background-size: to set the image size!
I have one div overlaying another div as follows:
div.container {
position: relative;
min-height: 100%;
margin:0;
padding:0;
background:url('http://www.scratchprogramming.org/img/book.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 62% 70%;
overflow:hidden;
}
div.content {
position: absolute;
min-height: 100%;
margin:0;
padding:0;
top: 0;
left: 0;
width:100%;
z-index:10;
overflow:hidden;
}
My html starts out like this:
<div class="container">
<p id="catImage">
<img src="img/Scratchcat.png" alt="cat" />
</p>
</div><!--container-->
<div class="content">
Now I had to set the height on the cat image really long so that the background image in the container (book.png) will fill the content area.
The problem is when testing on different browsers... somtimes the book.png background goes over the content length, leaving a couple of inches extra on the bottom.
Is there any way I can make the content and container height the same using css and not having to play around with the image height ?
Here is the working example: http://www.scratchprogramming.org
I came up with a solution very similar to this:
How to make one div's height depended of another div's height?
Thanks, everyone.
Try this:
body {
background: url('http://www.scratchprogramming.org/img/book.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale')";
}