I am trying to set background image for particular components.I want to set image to entire html page of example.component.html, but its not working for me
example.component.css
html {background: url(assets/imagenew.jpg) no-repeat center center fixed; -
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; background-size: cover; }
body { background-color: transparent;
overflow: hidden; }
Related
I have a background-image which appears well on Firefox but does not appear on Google Chrome at all. I don't understand ... Thank you very much.
edit : I see that I am told that the answer is already elsewhere but no. I don't have add block so it's not the same problem. Thank you anyway.
CSS :
#section2{
background: url(../images/references.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
HTML :
<div id="section2">
</div>
use the background-image: property
#section2{
background-image: url(../images/references.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
I don't know how you can see your image on firefox with the code you show us.
Div size can't adjust to background-image size. Meaning that if your div has a height and width of 0, we won't be able to see background-image.
If you add content to your div or width and height in CSS, you'll see the image appear.
#section2 {
background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
width: 500px;
}
<div id="section2"></div>
There is no height / No content in the div so you sould not see anything.
Code is fine anyway
#section 2 {
height: 200px;
width: 200px;
}
Add this to ur css
I am working in Ionic, I've added a background image in CSS, but when I build the android application there is a white space in place of that background image, how can I solve this error?
CSS code is:
.abc{
background-image: url('/img/s.png') !important;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Your image should be at a path similar to www/img/background.png.
Make sure that start of your image path has "../" this will point it to the correct image path in your resource folder once the app is built for a device.
To set background image you can try below css.
.scroll-content{
background: url("../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
in some ionic version
.pane{
background: url("../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
If you are using ionic2 then in src/app/app.scss
.scroll-content {
background: url("../../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
or
ion-content{
background: url("../../img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Hopefully this will be a quick question. I wanted to add an image to my landing page that scales to any screen. I found this code to be the suggested and most optimal method
html {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
However I am having problems implementing this. This code does what it is supposed to, however if I set it under html then this image takes place anywhere I call html in my site which I dont want. I want this to occur in one page of my site only. I tried creating my own custom html tag bodycover {} but that didn't work.
I am new to this and have not taken a step into custom html tags yet. I feel like there is an easy solution to this but I can't find it despite researching it thoroughly.
Thanks
EDIT: If there is a simply way to get this working without a custom element that would be even better. I simply don't know of one
Like #Paulie_D said, you don't need to apply this to the html tag; a standard div will work. Also, give the new element some dimension to width and height. Slightly cleaned up:
.bg {
width: 100%;
height: 100%;
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Make sure the parent element of .bg has a height and width of 100% as well.
Why not do like this, where you add an attribute or class to the body for the particular page.
This can be done either server side, using i.e. ASP or PHP, or client side, in the page load event.
Page to show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body class="big-bkg">
</body>
Page to not show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
</body>
I'd say: put all that stuff into body, not html
body {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can make it with a simple absolute div with width and height 100% just after the body tag and z-index lower than the main-container.
html,
body {
padding: 0;
margin: 0;
position: relative;
height: 100%
}
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg') no-repeat center center fixed;
background-size: cover;
}
.main-container {
position: relative;
width: 80%;
background-color: red;
height: 80%;
margin: auto;
z-index: 3;
}
<div class="bg"></div>
<div class="main-container"></div>
I have used a background image on body to cover full screen but it is partially hidden by container-fluid class from bootstrap3.
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;
background-position: center
}
Screenshot:
So I have the following css code which sets the background image to all my webpages
html {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My question is can I have a background image on one page lets say index.html and another background image for the rest of my pages?
You can do this is a variety of ways, an easy one is to give a class to a root element and style appropriately. FYI I'd use body instead of html for the background.
CSS
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.home {
background: url(../index/images/white.jpg) no-repeat center center fixed;
}
body.product-list {
background: url(../index/images/another-image.jpg) no-repeat center center fixed;
}
index.htm
<body class="home">
...
</body>
productList.htm
<body class="product-list">
...
</body>
You could use a class instead of going directly for the html selector:
.blue
{
background: blue;
}
then call it like so:
<html class="blue">
Add internal style to index page, like below
<style>
body {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
And CSS file's body will apply to all other pages.
Add you class only to that index.html file for that site.
<html class="home-page">
html.home-page {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}