body {
background: #fff url("milkshakeonthewindowsill.jpg") cover no-repeat fixed;
}
That's my CSS for my body, yet, it won't load the image, but somehow,
body {
background-color: #fff;
background-image: url("milkshakeonthewindowsill.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
this code does. What am I missing or doing wrong?
In my experience, size cover has to be added separately:
body {
background: url("milkshakeonthewindowsill.jpg") no-repeat fixed;
background-size: cover;
}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the other ones are in this order.
background: #fff url("milkshakeonthewindowsill.jpg") cover no-repeat fixed;
You are making use of background-size which isn't supported in the shorthand syntax and it should be in that order to work as given above. So, the correct syntax would be:
background: #fff url("milkshakeonthewindowsill.jpg") no-repeat fixed;
background-size:cover;
Background size cover must be added separately:
body {
background: #fff url("milkshakeonthewindowsill.jpg") no-repeat fixed;
background-size: cover;
}
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...
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;}
my background is not loading. It is embedded in the header tag loading through the style sheet. See css below:
header{
margin: 0;
background-image: url(/images/sagage_header900.png) no-repeat ;
display: block;
}
Thanx in advance!
Don't use no-repeat in background-image property.
Try this :
background: url(/images/sagage_header900.png) no-repeat;
OR
background-image: url(/images/sagage_header900.png);
background-repeat: no-repeat;
Try removing no-repeat
background-image: url(/images/sagage_header900.png);
if you want to add background-repeat:
background-repeat: no-repeat
If still doesn't work, try adding !important to background-image as follow:
background-image: url(/images/sagage_header900.png)!important;
I am having trouble getting background-size: cover; to work from my CSS file when specifying an inline background image via style="" tag:
CSS
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background: #cccccc;
}
HTML
<header class="hero" style="background-image: url('hero.jpeg');"></header>
If I add !important to background-size: cover;, it works properly. Why can I not get this to work without !important?
Try changing background: #cccccc; to background-color: #cccccc;.
As background is a shorthand rule, it will override some the of values you set earlier.
Initial value, as each of the properties of the shorthand:
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
You are overwritting all your background styles with background: #cccccc; because you are not specifiyng the background attribute, so you should change it by
background-color: #cccccc;
by this way the background color will work as color attribute and won't overwrite the others attributes
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).