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...
Related
I would like to have background image to whole width. I have CSS code as below.
background: url(../images/img.png) 50% 50% no-repeat;
-webkit-background-size: auto 100%;
background-size: auto 100%;
But with this code image has margin with two sides. I made margin:0 in body tag of course.
Thanks for help!
You can use following css.
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url(../images/img.png);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You are starting the background with 50% 50% which is kinda weird. So what you do is to use background-size: cover; and make sure you give no-repeat:
body {background: url("https://images.unsplash.com/photo-1489844097929-c8d5b91c456e?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=") no-repeat; background-size: cover;}
I tried with
.slider {
background: url(../images/slid1.jpg) no-repeat 0px 0px;
background-size: cover;
max-width: 100%;
min-height:800px;
}
.slider1 {
background: url(../images/slid2.jpg) no-repeat 0px 0px;
background-size: cover;
}
.slider2 {
background: url(../images/slid3.jpg) no-repeat 0px 0px;
background-size: cover;
}
i want to know how to make this div image responsive?
In your example css you are using background-size:cover. This property causes the image to scale to the smallest size in where both the width and height of the image are at least the size of the container. background-size:contain might be give the behaviour you want. It is the opposite of cover, in that it tries to scale the image to be as big as possible in the allocated space without clipping.
.img
{
background-image:url(https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d);
background-repeat:no-repeat;
background-size:contain;
min-height:400px;
max-width:50%;
}
<div class="img">
</div>
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 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 set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).