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;
Related
I tried to get a linear gradient on my background from top to bottom but the background image which I was getting originally now disappeared. However if I used the normal background-image property I was getting my image properly.
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
It should give the proper background without a gradient but instead the image disappeared. Somebody pls help!
Please try this.
It will work properly.
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
opacity:0.5;
Use opacity:0.1;
I hope this will fix your problem
check this one.
.main {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-image: linear-gradient(166deg, rgba(0,0,0,0.6),rgb(17 29 251 / 90%)),url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
<div class="main"> </div>
Use the following syntax:
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
opacity:0.1;
body{
background:url("?../img/by.jpg") no-repeat;
background-size:cover;
}
Will this code work in all browsers
Or I can do it without the question mark???
Try It
body{
/*
background: color-name url("image-source") repeat-property attachment-property position-property;
Shorthand Example :- */
background: #D0E4F5 url("/images/smiley.png") no-repeat scroll 0px 0px;
/*
Long Example :-
#demo {
background-color: #D0E4F5;
background-image: url("/images/smiley.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;
}
*/
}
<html>
<head></head>
<body>
Some Example Text
</body>
</html>
Use this to background image to an element also this will work in all browsers
element {
background-image: url('your_Source');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
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...
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;
}
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