Is it possible to have different multiple body backgrounds but only using 1 image depending on what html file is accessed?
To clarify i have 1 external style sheet but i have 3 html files each accessing the external style sheet what i want to do is have 3 different body background image for each html file. What would be the proper way of doing this?
body {
background-image: url("backGroundImage1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
Using Id or class would be the best way to achieve what you are looking for.
You need to add the below CSS to your main stylesheet file and based on your requirements and pages, you can add them to your <body> with either ID's or Classes.
For instance, using with ID
body#One {
background-image: url("backGroundImage1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
body#two {
background-image: url("backGroundImage2.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
body#three {
background-image: url("backGroundImage3.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
The HTML:
<body id="One">...</body> or
<body id="two">...</body> or
<body id="three">...</body> for your pages.
For instance, using with Class
body.One {
background-image: url("backGroundImage1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
body.two {
background-image: url("backGroundImage2.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
body.three {
background-image: url("backGroundImage3.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed; }
The HTML:
<body class="One">...</body> or
<body class="two">...</body> or
<body class="three">...</body> for your pages.
You can insert them on these pages as per your requirements.
Hope this helps.
Hope it helps
/* For all pages */
body {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed;
}
/*first page*/
body.first {
background-image: url("backGroundImage1.jpg");
}
/*second page*/
body.second {
background-image: url("backGroundImage2.jpg");
}
/*third page*/
body.third {
background-image: url("backGroundImage3.jpg");
}
Related
I want to cover my page with a background image and I am using a jumbotron which covers all components of page but its size is not cover all page. So, I also attached a background image to .html in my css file.
.jumbotron {
padding: 1rem 1rem;
background-color: #e9ecef;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-image: url('background.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now, image look like a broken mirror. How can I made it look like a single image? Or what is the logical way of doing this?
you can apply background image on body tag.
body {
width:100%;
background-image: url('background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
You can try this,
body {
margin: 0;
height: 100vh;
background-image: url(background.jpg);
background-size: cover;
background-position: center;
}
I'm trying to center and cover an image up the whole screen which is coming from the Unsplash Source API.
I think because the image actually gets fetched after the CSS is already applied it doesn't work just like that:
(If the demo might appear covered up run it in full-screen)
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background: url(https://source.unsplash.com/collection/1228371) no-repeat center center fixed;
}
<div class="centered-image"></div>
Do you guys know a work-around?
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
background-repeat: no-repeat;
height: 100%;
background-image: url(https://source.unsplash.com/collection/1228371);
}
Made some CSS Changes. Give this a try.
I'm trying to fix the background image. On other devices is displayed well... but in Safari iOS looks very ugly. The code is as follows:
.main {
background: url('imgs/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Thus it is seen:
The code is here: https://github.com/lozanotux/lozanotux.github.io
SOLUTION (CSS):
.main {
background: url(../imgs/bg.jpg);
background-color: #444C5C;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
zoom: 100%;
}
My question is about "background-image" in CSS. How can I add "background-image" in full screen? I used "width: 100% " but it doesn't work.
html,body{
height: 100%;
}
body{
background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body {
background: url(http://i.imgur.com/aZO5Kolb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
html {
height: 100%
}
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
}
bottom of the image is not fit into the screen. I have added background image in css body tag. Width is perfect.But height is not fit into the screen. I saw many examples.but it is not coming.
These two lines are enough to fix and stretch a background image !
body{
background:url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat fixed;
background-size:cover;
}
JSFIDDLE : -FIDDLE DEMO HERE
U may use following code
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
height:100%;
}
try background-size: cover, it should fit screen
You can set following properties,
Check this Demo jsFiddle
CSS
body {
background: url('../Media/bg3.jpg') no-repeat center center fixed;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
CSS
Check this Demo jsFiddle
background-image: url('../Media/bg3.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
background-attachment: fixed;
Add your background image as
background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */
for divs inside it use this for complete center
width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
Now it is working.
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
height:870px;
background-image: url('../Media/bg3.jpg');
}
footer
{
position: absolute;
bottom: 0;
}
Now it fit the full screen.Thank you
remove body tag css class
and add html class to do that
this is the code
`html {
background: url('../Media/bg3.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
`