Body won't accept background-image property?

Body won't accept background-image property? - javascript

PROBLEM SOLVED
I'm working on a personal website and my background image won't appear, I am using a JavaScript code to change my background color from time to time and my default background-image is set to a color so my the first second of website won't appear white. Could that be the problem of my image not appearing?
This is part of my html code:
<!doctype html>
window.onload = function() {
var currentColor = '#61a18e';
setInterval(function() {
document.body.style.backgroundColor = currentColor;
currentColor = currentColor === '#dd9023' ? '#61a18e' : '#dd9023';
}, 10000);//
};
</script>
</head>
<body>
<div id="wrapper">
<div class="nowplaying">
Text
</div>
<div class="song">
TExt
</div>
</div>
</body>
</html>
And this is a part of my css code including html, body and the main wrapper container(if it helps for some reason):
html, body{
width:100%;
height:99%;
position: relative;
margin: auto;
background-color:#61a18e;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-image:url ('img/background.png');
}
#wrapper{
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
position:absolute;
width: 50%;
height: 40%;
overflow: auto;
}
Hope I'm not missing anything here.
Thanks
EDIT :
Interesting my code on JSFiddle is working....
But none of my browser (Mozilla and IE9) is showing any image,but if i insert it with the image is showing...
Is there some settings to browser not showing?
NEW EDIT!
Problems solved, silly for me, but it looks like I should have put background-image:url ('../path');, for some reason it won't take without the ../.
Thanks for the help.

It’s the extra space between "url" and the parenthesis.
background-image:url ('img/background.png');
Becomes
background-image: url('img/background.png');

Remove the space between url ('image.jpg').
Also, it's going to duplicate when you get it to work, for HTML and Body elements.

You are setting some colours via the tag. If they are for background and if you load the css file before it, the script will override it.

Here you go: http://jsfiddle.net/g8Jhe/1/
CSS
html,body
{
width:100%;
height:99%;
position: relative;
margin: auto;
background-color:#61a18e;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-image:url('https://www.google.com/images/srpr/logo11w.png');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

Related

Background Image Display in Viewport [duplicate]

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
link: g-floors.eu
Code I have so far (content part)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}

If you want the same image to scale based on the size of the browser window:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
EDIT:
The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Try this :
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

CSS:
background-size: 100%;
That should do the trick! :)

Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.
#mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
#include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/

This is an easy one =)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo

Here is the best way i got.
#content {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
Check on the w3schools
More Available options
background-size: auto|length|cover|contain|initial|inherit;

#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}

I used
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.

Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

You can use this. I have tested and its working 100% correct:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100%;
background-position:center;
You can test your website with responsiveness at this Screen Size Simulator:
http://www.infobyip.com/testwebsiteresolution.php
Clear Your cache each time you make changes and i would prefer to use Firefox to test it.
If you want to use an Image form other site/URL and not like:
background-image:url('../images/bg.png');
//This structure is to use the image from your own hosted server.
Then use like this:
background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Enjoy :)

<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
#media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>

If you want the entire image to show irrespective of the aspect ratio, then try this:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
This will show the entire image no matter what the screen size.

background:url("img/content-bg.jpg") no-repeat;
background-position:center;
background-size:cover;
or
background-size:100%;

Just two lines of code, it works.
#content {
background-image: url('../images/bg.png');
background-size: cover;
}

Adaptive for square ratio with jQuery
var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;
if(HW<1){
$(".background").css("background-size","auto 100%");
}
else if(HW>1){
$(".background").css("background-size","100% auto");
}

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;
the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)

I think, the best way to do it is this:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
In this way there's no need to do nothing more and it's quite simple.
At least, it works for me.
I hope it helps.

Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;

Not able to add background image for a particular DIV in HTML

I have a webpage like the following:
I am trying to add a small background image in the marked section below:
I tried the following code for the DIV
.king {
background-image: url(../img/banner-lg.jpg);
}
<div class="king">
</div>
But the background image is not coming into display, can anyone help me with this.

try to write like this:-
.hero-image {
background-image: url("/images/photographer.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

As you can see in my snippet if you set some width and height static to the div, the image is showed up.
Be sure that your div has height so he can show your image.
Be sure that the image url() is corrected, did you try to show an external image like http://via.placeholder.com/200x200
.king {
background-image: url("http://via.placeholder.com/200x200");
/*If you comment background-repeat the image will be repeated*/
background-repeat: no-repeat;
width: 500px;
height: 500px;
/*if you comment width and height you just see a grey line taken by <p> tag
if you comment the <p> you don't see nothing*/
}
<div class="king">
<p> Some text Here </p>
</div>
Some good resources:
https://www.w3schools.com/cssref/pr_background-image.asp
https://developer.mozilla.org/it/docs/Web/CSS/background-image
PS: I see in the resources that the form is url('the_path_image')... did you try with '' ?
EDIT
Add an example with no repeated image.
Now the container div is 500x500 and image is 200x200.
If we comment the background-repeat: no-repeat; the image will be repeated for the full div area

You can use below code to set background image.
.king {
background-image: url('../img/banner-lg.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}

Revealing a div behind another with scrolling

I'm currently working on a joomla website in which I have multiple modules such as :
<div class = "mod_slideshow"></div>
<div class = "blog-featured"></div>
<div class = "mod_example"></div>
and I would like them to overlap over one another just like in this website : http://www.lyonaeroports-t1.com/fr/la-qualite-de-service-au-coeur-du-projet
So far, the only thing I managed to to is to toggle the position to "fixed" of every div depending on window.scrollTop. The div scrolls over the previous one but doesn't "appear" juste like in the website mentioned.
I really don't know how to do this, any help would be very welcome.

This effect that they are achieving is called "Parallax Scrolling effect"
The example that you have shown is actually very easy - your magic CSS property is background-attachment: fixed. Consider the below HTML
Codepen
HTML
<div class="mod_slideshow"></div>
<div class="blog-featured"></div>
<div class="mod_example"></div>
the appropriate CSS code should be (no JS required for this)
.mod_slideshow {
background: url("http://www.w3schools.com/css/trolltunga.jpg");
height: 500px;
background-attachment: fixed;
}
.blog-featured {
background: url("http://www.aee-community.com/wp-content/uploads/rtMedia/users/1/2016/09/2429637D00000578-0-image-a-284_1419003100839.jpg");
height: 500px;
background-attachment: fixed;
}
.mod_example {
background: url("http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg");
height: 500px;
background-attachment: fixed;
}
Simple :-) just give a height to your div with the fixed background. Remember the div itself is NOT fixed, the background image is.
.mod_slideshow {
background: url("http://www.w3schools.com/css/trolltunga.jpg");
height: 500px;
background-attachment: fixed;
}
.blog-featured {
background: url("http://www.aee-community.com/wp-content/uploads/rtMedia/users/1/2016/09/2429637D00000578-0-image-a-284_1419003100839.jpg");
height: 500px;
background-attachment: fixed;
}
.mod_example {
background: url("http://economictimes.indiatimes.com/thumb/msid-25252601,width-640,resizemode-4/stunning-images-of-the-space.jpg");
height: 500px;
background-attachment: fixed;
}
<div class="mod_slideshow"></div>
<div class="blog-featured"></div>
<div class="mod_example"></div>

ng-bind-html not working when html content contains image which loaded using css

I have done all the things mentioned here on post about same topic . i.e. I used 'ngSanitize' and format html content using 'sce.trustAsHtml()' also, it render correctly if html have text and images, but it does not render images correctly while html content have image which loaded using 'css'. Here is my HTML content which i want to bind.
<html> <head> <style> body{ padding: 0 0; margin: 0 0; } .img-wrapper{
width: 100%; height: 50%; margin: 0 auto; background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png')
no-repeat center; -webkit-background-size: contain; -moz-background-size: contain;
-o-background-size: contain; background-size: contain; } </style> </head> <body> <div>
<div class='img-wrapper'></div><div style='font-size: 20px;' >Test the image upload or not
successfully</div> <div align=center style='font-size: 17px;'>Address goes here</div>
</div> </body></html>
My js code as bellow:
$scope.content = $sce.trustAsHtml(adTemp.content);
And Html code to bind it as bellow:
<div ng-bind-html="content"> </div>

Finally I am able to find the solution, we should give size to div which we are using to bind html if html content contains images which are rendered using css (i.e. set background to another div). The angular ignores image size set by external css inside '' tags, also we should not give parent 'div' to our original 'div' which used to set background image.
Here is my html code:
<div style="width:500px; height:600px;" ng-bind-html="myHtml"></div>
And here is my updated Html content which i want to bind:
<html> <head> <style> body{ padding: 0 0; margin: 0 0; } .img-wrapper{
width: 100%; height: 50%; margin: 0 auto; background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png')
no-repeat center; -webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain; background-size: contain; } </style> </head> <body>`enter code here<div class='img-wrapper'></div><div style='font-size: 20px;' >Test the image upload or not successfully</div> <div align=center style='font-size: 17px;'>Address goes here</div> </body></html>

Text centered on a background image [CSS]

I would like to have a background image (in a div) which is always fully displayed on the screen (100 % for the width and height) with a text located on the middle of the div whatever the resolution. (see below) The div in green (#section_header) is the container of the background image.
http://uprapide.com/image/1023303-stack
I'm using JQuery to do this, using the ratio (width/height) of the image I want to display :
var resizeTimer;
jQuery(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeFunction, 250);
});
function resizeFunction()
{
// TO set the image background dimensions
var number = (jQuery(window).width()) ;
jQuery('#section_header').height(number/2.88);
// TO put the text on the middle
var element_w = parseInt(jQuery('#section_header').css('width'),10);
var element_w2 = element_w/2;
var space_border = number - number/2 - element_w2;
jQuery('.column.two-third.column_column.bg_section_header').css('border-spacing',space_border/2+'px 0px');
}
and the css
#section_header {
min-height: 255px;
display: table-cell;
vertical-align: middle;
}
.column.two-third.column_column.bg_section_header {
display: table;
width: 100%;
}
This solution works, but I would like to optimize the solution, because it is pretty slow to load. Any advice?
Thank you

This can be done much simpler using purely CSS :
HTML
<div class="container">
<div class="middle-div">
<p>TEXT</p>
</div>
</div>
CSS
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background: red
}
.middle-div {
color: white;
}
See working example here : - EXAMPLE
EDIT
To have the background image stretch and adjust to the screen width, add the following to your main container class :
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;
*Obviously you would need to replace url(images/bg.jpg) with your own image.

Did you mean something like this? If so you don't need jquery for that.
<div class="mrBigAssWithCenter"> Center Text </div>
.mrBigAssWithCenter{
width: 80%;
height:80%;
min-height:100px;
background:url('http://s3.wallippo.com/thumbs/300x250/black-background-metal-hole-small-0973bb47dba91f8d8959dd9e308cd3ae.jpeg') no-repeat;
background-size:100%;
text-align:center;
border:1px solid #a1a1a1;
color:#fff;
}
Fiddle

Develop Reference

JavaScript is the programming language of the Web.

Body won't accept background-image property? - javascript

It’s the extra space between "url" and the parenthesis. background-image:url ('img/background.png'); Becomes background-image: url('img/background.png');

Remove the space between url ('image.jpg'). Also, it's going to duplicate when you get it to work, for HTML and Body elements.

You are setting some colours via the tag. If they are for background and if you load the css file before it, the script will override it.

Related

Background Image Display in Viewport [duplicate]

Not able to add background image for a particular DIV in HTML

Revealing a div behind another with scrolling

ng-bind-html not working when html content contains image which loaded using css

Text centered on a background image [CSS]

Categories

Resources