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.
Related
I have a background image which I've set on the body of the page. The background appears on my computer but when I go to another computer the background is not there.
body {
background-image: url("https://sourceneed.com/img/pineapple-1704338_1920.jpg");
overflow-x: hidden;
background-attachment: fixed;
}
If the other device you've tested on is a mobile browser it might not work. The background-attachment style has limited support for mobile browsers:
https://caniuse.com/#search=background-attachment
Seems to work here:
body {
background-image: url("https://sourceneed.com/img/pineapple-1704338_1920.jpg");
overflow-x: hidden;
background-attachment: fixed;
}
<body>
</body>
Its not Computer issue its due to browser or browser version
set background image in a div
`#image-div {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}`
If you want to add background in complete page use cover properties
`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;
}`
I am working on a site which uses bootstrap tabs/pills from w3 schools(http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs&stacked=h)
I wanted to show background for the entire web page but the content of the tabs always hide the background image.
html {
background: url("bground.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use body instead of html
body{
background: url("bground.jpg");
}
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
I have a background image for my website, and when I sourced the image in Html it tiles across the page and stops in the same place. How can I resize the image to fill the window and scroll down the page so that the text and stuff just appears to be travelling up the page?
I've used the code in your answer and the image shows and isnt tiled but it repeats down the page instead of scrolling down?
<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
There's the script I'm using.
*Updated with jsFiddle: http://jsfiddle.net/q5WKg/1/
To stop the background from repeating you want to do in your CSS:
background-repeat:no-repeat;
To have the background always fill use the css3 property:
background-size: cover;
Because its not been widely implemented you will probably need to use vendor prefixes:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
In addition to your comments - in full it would look something like this:
<style type="text/css">
html
{
background-image: url('path/to/imagefile.jpg');
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
If your background image was on the html element.
*Update 2
I would correct your code above, move your style declaration in to the head of the document (although where you put it will work fine in most browsers) and remove any info regarding the background image from the body tag.
Also the url you are providing is an absolute path to the file on your computer - you need to be using relative paths really, and not paths that are dependant on your computers file structure, I'm assuming that the HTML document is in the same folder as "Background copy.jpg". Therefore your code should read as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
background: url('Background copy.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>
In addition to the updates to your code, I would change the name of any images you use to all be lowercase and to contain no spaces in their filenames - this will save you a lot of headache further down the line...
If you want to better understand how HTML/CSS works, and how to structure them properly I would read up at w3cschools, they have the option to "try it yourself" on a lot of pages which means you can see how the code should be structured and test out different things with CSS & HTML.
w3schools css tutorials - http://www.w3schools.com/css/default.asp
Probably this:
html {
background: url(images/your_file.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For IE - IE9+ only, other browsers - should work.
Much more info here: http://css-tricks.com/perfect-full-page-background-image/
P.S. You might also be interested in parallax.
Set a few options for your background-image:
html,body{
background-image: url('your/image/path');
background-repeat: no-repeat;
background-size: cover; // this fills up the complete page.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Hope it helps!
https://css-tricks.com/perfect-full-page-background-image/
In this site's version, it works perfectly. here's the code:
html {
background: url("image.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm working on a basic html page and I have this background image bg.jpg.
But the problem is depending on the screen size you have and how many pixels the screen has I'm not able to view the whole background image which is something I want.
How do I make the background fixed so you can see the whole background?
If you mean a full page background image than you can simply do it with CSS3 background-size property
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you need to attach it, kinda fixed and shouldn't be scrolled, than use
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
You can do something like this:
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: link
Delete your "body background image code" then paste this code:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS pseudo selectors.
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
Of course those other solutions are OK too, but they only work in latest modern browsers. This pseudo selection solution works in most browsers used today. If you'd like to support even older browsers, like ancient versions of IE, then you can use a div to contain the background image and style it as you'd like.