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;}
Related
no-repeat is also not working.
.learning-outer-div
{
width:100%;
height:600px;
max-height:100%;
background-image: url(https://via.placeholder.com/150);
background-size: 104% auto;
}
<div class="learning-outer-div"></div>
background-image doesn't take a no-repeat option.
you'd need background
background: url(../images/banner.jpg) no-repeat;
or
background-repeat: no-repeat
First of all you need quotes around your url. Then use the background instead of background-image, because that's the shorthand.
The following code centers the background-image horizontally and vertically. The background-size specifies that the image should size to fill (always fill the background).
background: url("https://via.placeholder.com/150") no-repeat center center;
background-size: cover; /* size to fill */
.learning-outer-div
{
width:100%;
height:600px;
max-height:100%;
background-image: url(../images/banner.jpg) no-repeat;
background-size: 104% auto;
}
can you try this? thats all...
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;
}
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 a fiddle here.
CSS:
body, html{
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100% 100%;
}
#img {
width:70%;
display:inline-block;
background-color:red;
position:absolute;
bottom:12%;
height:70%;
margin-top:-80px;
margin-left:100px;
}
HTML:
<div id="img"> </div>
Is it possible to make the id tag called #img look like it's fixed to the background?
I am simply trying to make the red block fluid between the blue box (look at the fiddle).
So if you adjust the resolution of the page the red block will not go out of the blue box height-wise, but it will go out of the blue box width-wise.
So basically I want to make sure the red block (#img) stays within the blue box that is on the background image. How can I do this?
Percentages and pixels don't mix that well... Change it all to percentages, for example like this:
#img {
width: 74.1%;
display: inline-block;
background-color: red;
position: absolute;
height: 71.8%;
top: 17%;
left: 13.2%;
}
Fiddle: http://jsfiddle.net/Niffler/r3nW8/43/
Sure you can:
http://jsfiddle.net/r3nW8/44/
body, html {
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#img {
background-color:red;
position:absolute;
margin: 0 auto;
top:18%; /* not 15% cause you have more space on the top area! :) */
left:0;
bottom:0;
right:0;
height:70%;
width:73%; /* note the blue border on your image is not positioned well... */
}
With some more % tweaks you can achieve perfect results: http://jsfiddle.net/r3nW8/45/
I want to use a background image to my section element with width:100% and height:40%.
So i used CSS3 and used this solution:
background-image: url(My_Local_Image);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: center top;
It worked nice!
My problem now is that i want the background-image to be cropped to fit the size i specify. Now image is streched to fit.
Is there ant way that i can achieve this?
FIDDLE
Unfortunately you cannot do something like
background-size: cover 40%;
cause you'll loose the 100%
the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container,
setting also width: 100%; and height : 40%; for the same.
But what you can do is
LIVE DEMO
<section>
<div class="sectionImage" id="first"></div>
<div class="sectionContent">1</div>
</section>
<section>
<div class="sectionImage" id="second"></div>
<div class="sectionContent">2</div>
</section>
<section>
<div class="sectionImage" id="third"></div>
<div class="sectionContent">3</div>
</section>
section{
background:#444;
position:relative;
margin:10px auto;
height:300px;
width:800px;
color:#fff;
}
.sectionImage{
width: 100%;
height:30%;
background: transparent none no-repeat center center;
background-size: cover;
}
.sectionContent{}
#first{
background-image: url('1.jpg');
}
#second{
background-image: url(2.jpg);
}
#third{
background-image: url(3.jpg);
}
If I understand what you're trying to do, simply remove the 40% from your background-size and the image will fill the div at the 800x300px size.
You must place the background container inside your main container. After that you must provide width and height of main containter and make overflow:hidden.
You can then play with main container's width and height to change crop size. (You can use width:40%; and height:100% too)
Here is JSFidde.
HTML:
<section id="first">
<div id="bg"></div>
</section>
CSS:
#first{
height:300px;
width:200px;
overflow:hidden;
}
#bg{
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
width:800px;
height:300px;
}
Use an inner div to get the crop effect:
Fiddle
CSS
#first{
height:300px;
width:800px;
}
#first div{
width:100%;
height:40%;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size:100%;
background-position: 50% 50%;
}
Use the :before pseudo class
#first:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40%;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center center;
}
This will give you many CSS options to deal with both bigger/smaller images, stretching/cropping, etc., without messing with the html