In body tag, I added a background-image. But the image is repeated 4 times. How to fix that to display it only single time?
HTML code:
<body background="image.png"></body>
CSS code:
body{
background-image : no-repeat;
}
It's background-repeat
body
body{
background-repeat: no-repeat;
}
You can add style to the body tag using the style attribute:
<body style="background-image:url('image.png');background-repeat: no-repeat;">
hi now used to this
body{background:url('image.png') no-repeat};
or this
body{
background-image:url('image.png'); // for your body background
background-repeat: no-repeat; // for your body background repeat
}
Remove background from body and apply your CSS like below.
body
{
background-image:url('image.png');
background-repeat:no-repeat;
}
html {
background: url(http://p1.pichost.me/i/64/1886374.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<body>
</body>
</html>
Related
I did some UI practice and there is a problem with the background-image to body tag. The image is overflowing horizontally and I want to get rid of that. Plz help me.
Code how I tried to fixed it.
<style type="text/css">
body {
background: url("public/res/bg(WT).png") no-repeat fixed center center;
background-size: cover;
}
</style>
The problem illustration : (red box)
My full code is like
<html>
<head>
<style>
* { margin:0; padding:0; }
body {
background: url("public/res/bg(WT).png") no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
//contents are here
</body>
</html>
Try this
* { margin:0; padding:0; }
body {
background-image: url("http://unsplash.it/2500/1000");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center;
background-attachment: fixed;
}
<body>
</body>
wrap the entire content below <body> with a div and apply overflow: hidden for it.
.wrapper {
overflow: hidden;
}
https://i.imgur.com/gPpaxlH.png take this as a reference. i have wrapped everything except the script and the div as i think that was generated with JS. remove overflow-x from <body>
in any project, make it a rule to follow this.
i have a background image and i want to use it on my website but the problemn is i cant make it full height and width in any size, help me and please, check the codes below
current code, code #1 : haft and not full
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
height: auto!important;
width: 100%!important;
}
code # 2
body {
background: url(http://localhost/wordpress/wp-content/uploads/2016/11/CHRISTINE-BACKGOURND.jpg) no-repeat center center fixed;
background-color: white;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
i cant make it full width and height :( please help
html{
width:100%,height:100%;
}
body{
background-image: url(https://i.stack.imgur.com/s0G3w.jpg);
height:100%;
width:100%;
}
<body>
</body>
Please try this
HTML
<body></body>
CSS
html{
width:100%,height:100%;
}
body{
background: url(../image.jpg) no-repeat;
background-size:cover;
height:100%;
width:100%;
}
I've added an background to a div class. What I want is for the image height to always have the same height as the browser window, which I tried to achieve with min-height= 100%. I don't get it to work though.. Any suggestions?
HTML:
<div id="top" class="jumbotron">
</div>
CSS:
.jumbotron {
background: no-repeat center center url('top.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
margin: 0px;
}
Add this to your jumbotron class:
min-height: 100vh;
Working fiddle: https://jsfiddle.net/dgo3sz0a/
The body and the html have to fill the 100% height:
html, body {
height: 100%
}
I am trying to display the full image in background. But! it's showing very strange behaviour.
It's taking only 60% of my screen. The rest of the screen takes white color. But when i am defining opacity attribute, then this opacity applies only on the rest of the 40% screen and image starting to display with opacity effect (but only in this 40% screen).
..
I have googled alot of times and applied alot of css tricks but it does not taking full screen with opacity.
..
Kindly help me!
css:
html, body {
height:100%;
}
body{
background: url(../..//images/background_pic.jpg) center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.8;
}
I found this way to solve your problem. Check this JSFiddle.
Style:
html, body {
}
.parent{
position:relative;
}
.background{
position:absolute;
background: url(http://farm6.static.flickr.com/5182/5613127636_e854aea66b_o.png) no-repeat center center fixed;
width: 100%;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.3;
}
.foreground{
position:relative;
}
HTML:
<div class="parent">
<div class="background"></div>
<div class="foreground">
Put text here.
</div>
</div>
Apply the background to html rather than body.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
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;
}