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;
}
Related
I have a CSS background image, but when I resize by browser to go bigger the image moves to the left. How do I keep the image in the same place even when the browser resizes? My code (so far) is:
.home-top {
width: 100%;
background-image: url('../assets/images/home-2x.png');
background-repeat: no-repeat;
background-position: -75px -600px;
margin-bottom: 50px;
}
Any idea's?
I had that issue in the past,
here is an example from my project - LIVE DEMO
drag the editor splitter and watch the reaction of the output.
The trick is in the css:
.general /* the beckground image class */
{
background-image: url('https://clipground.com/images/business-people-handshake-clipart-18.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.95;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover !important;
z-index: -1;
-webkit-transform: translate3d(0, 0);
width: 100%;
height: 100%;
margin: 0 auto;
}
I am trying to make by background image fit to the screen, but I'm not sure what to add to my code.
<body background= "b.png">
If anyone could suggest what to put and where that would be great.
Apply the following CSS to your body tag in your stylesheet. You can change the value of the properties to match how you want you background to look.
body {
margin:0;
padding:0;
background-image: url(b.png);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center;
background-size: cover;
-webkit-background-size:cover;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
position:relative;
}
As mentioned in one of the comments, put this into the CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
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");
}
on this page i have a background image on the <body> tag and i'm wondering if it's possible to add a link to it so it clicks through to something.
if this isn't possible, how would i add a wrapper <div> that would be hyperlinked?
<body id="index">
</body>
body#index {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-image: url(//) !important;
background-size: cover;
background-repeat: no-repeat;
background-color: transparent !important;
background-position: center;
width: 100%;
height: 100%;
check if this is what you want
<body id="index">
</body>
CSS
body#index {
background-color: red !important;
width:100vw;
height: 100vh;
}
Jquery
$('body').click(function () {
location.href="http://www.google.com";
})
fiddled here
try this
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;
}
`