I have been trying to apply linear gradient to the background, but there are stripes that appear in the middle I'm not getting a smooth gradient, how to get a smooth gradient from top to bottom
MY CSS
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #DADADA;
background-repeat: no-repeat;
background: -webkit-linear-gradient(white, #DADADA);
background: -moz-linear-gradient(white, #DADADA);
background: -ms-linear-gradient(white, #DADADA);
background: -o-linear-gradient(white, #DADADA);
My Fiddle : https://jsfiddle.net/3njyc0xm/
Yes, I think there is a problem with "your" colors. I have tried your code with other colors, and there is no problem.
I have tried your jsfiddle gradient in Firefox and Edge, and it seems that there is no problem with your colors, so maybe there is a Chrome bug, or something.
In Firefox your example works fine, but I think the "normal" CSS property is needed for some browsers. Just add it with
background: linear-gradient(white, #DADADA);
I edited your fiddle here
Related
I can't manage to load a background image. Here is what I've done:
First try:
html {
background: url(../images/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Issue: Chrome finds the image (=Path is valid) but displays the "broken" icon in the dev tools
Second try:
html {
background: url(../images/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Issue: Path is valid, chrome dev tools shows the image (= no "broken" icon) but the image is not visible on the actual website. Just a blank background.
Third try:
html {
background-image: url(../images/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Issue: I changed background: to background-image. The image doesn't even load now (= does not show up in chrome dev tools).
Note: bg1 and bg2 seem to be valid, I can view them in the standard windows photo viewer app.
I am quite confused, there is no other css file that overwrites the rules, it's just a page with some text on it. Where is the problem?
That's because you say html{...} but you want that the Body display the wallpaper.
Try that here:
body{
background: url(../images/bg2.jpg) no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
Now your website should display the image over the all size
A bit of Quick research here.
There is no shorthand for background-image there is for background. but the first element needs to be the background-color.
the second is the url
the thrid background-repeat
the fourth is the attachment
for your case this will be
background: #FFF url('../images/bg1.jpg') no-repeat center fixed;
This is my CSS code
.body_background {
background-image: url(body_background.gif);
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
This is my HTML code and it works fine.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="PreventQuestionLeak.css">
</head>
<body class="body_background">
</body>
</html>
I had some CSS that worked fine on a Mac in Safari.
But was broken in Chrome and Firefox Developer edition.
Safari Version
Correct Rendering:
Firefox Edition
Broken Rendering
Chrome Version
Chrome Rendering
For me I found the issue was CSS interpreter was broken if the url was placed in the background property.
I took the url out of background and used background-image: url() instead and it worked across all 3 browsers afterwards.
This MDN link provided the inspiration.
Before (broken)
card-1 {
background: linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg) center no-repeat /cover;
box-shadow: 7px 18px 50px #555;
}
After (fixed)
card-1 {
background-image:linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 7px 18px 50px #555;
}
Footnote:
I later found this on W3Schools:
background: bg-color bg-image position/bg-size bg-repeat bg-origin
bg-clip bg-attachment initial|inherit;
So for me the correct shorthand should have been:
background: linear-gradient(rgba(0,0,0, .6),rgba(0,0,0, .5)), url(images/pricing-card-bg.jpeg) center /cover no-repeat;
The no-repeat and /cover were the wrong way around. It's just Safari is more forgiving.
I have a problem with a background image I have when trying to stretch across the entire window. external CSS below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;}
#font-face /* support for browsers & IE v10 onwards*/
{
font-family:homefont; src: url("font3.ttf");
}
#main
{
position:absolute;
left:450px;
top:30px;
font-family: homefont;
font-size:150px;
line-height:70%;
}
This is what I have (see white space to the right of the image on the browser window):
Can anyone advise me on how to stretch the image across the entire window?
I have tried the suggestions as advised in the comments, however - the image appears to be cut from my knees downward :(. Are there any other suggestions?
Here is an axcellecnt article about your problem on css-tricks
Awesome, Easy, Progressive CSS3 Way:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can try this
background-size: 100%;
or
background-size:cover
Here you go:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Works in:
Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
top center;background-size-110%;background-repeat- no-repeat
Please increase the size as you like.
Scale the background image to be as large as possible
You need to use the background-size property with the value cover like below
body {
background-image: url("mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Source
See the background here:
http://www.achingsoul.co.uk/gallery/
It's applied to the body element and correctly-sized. But when you look at it here:
http://www.achingsoul.co.uk/services/
It's stretched out and very strange-looking. I'm not sure what it is as the CSS for it is the same on both pages according to inspector:
body {
background-image: url('images/aching-soul-background-2.jpg');
color: #4a2f1f;
background-size: cover;
}
Not sure what it is I'm doing wrong?
Remove the background-size: cover;
Your background won't stretch anymore, instead, it will repeat vertically.
The difference between both pages is caused by the greater height in the services page, when you use the cover value for the background-size property, it will cause this effect.
Try background-position:50% 50%;
and also
`/* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;`
I recently found the problem on a recent question I asked here which was related to what I thought was a Chrome or Safari webkit bug, or maybe something inside my style.css. However, I noticed after a while that my background was slightly moving on resize, and I concluded that when it moved towards the right, a left white border didn't show up from top to bottom on the left side of the screen, but when the background picture moved towards the right hand side then a 2px white border showed up on the left right side. How do I stop the border from moving.
MY CSS:
html {
background: url(/assets/fotball.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try this:
background: url(/assets/fotball.jpg) no-repeat center top fixed;
Change your code to this: jsFiddle Live Demo
html {
background: url(/assets/fotball.jpg) repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:;
}
When you use background-size: cover;, it makes no difference to use background:no-repeat or background:repeat. So in this case you can use repeat to solve your problem.
This isn't exactly about making background images in CSS for a site, so don't mark it as a duplicate just yet.
I need to replicate the following background, but in CSS. I have a variety of gradients implemented on the site but this is more like a darkening around the edges of the screen, and I don't know how to implement this, particularly in CSS. If there's a good way to do this with images please let me know.
Thanks!
You can try inset box-shadow http://jsfiddle.net/46JxH/
box-shadow:inset -70px 0 200px -30px rgba(0,0,0,.75);
Or background image with background-size:100% 100%;.
If you will be using images, you can try CSS3 background-size:cover
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can read more here