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%;
}
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 the following div in an angular view, this is all that is in the view as of now
<div class="home-container" ng-controller="ctrlHome" >
HELLO
</div>
I want to set it's background image to take up the rest of the page or the same amount as the body
here is the css
html {
height: 100%;
}
body {
font-family: "Hero", Times, serif !important;
min-height: 100%;
}
.home-container {
background: url('../images/94H.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
clear:both;
}
All I am getting it the image the height of the text HELLO which is 20px
This is probably something easy I am screwing up but it's frustrating non the less
Thanks in advance
Use height: 100% instead of min-height. Also add html to the CSS rule since body needs a parent element to calculate height: 100%
html,
body {
font-family: "Hero", Times, serif !important;
height: 100%; /* Changed */
}
.home-container {
background: url('http://placehold.it/600x1200') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
clear: both;
}
<div class="home-container" ng-controller="ctrlHome">
HELLO
</div>
I'm making a Wordpress Theme but I have a little problem with the footer. I want it to occupy the 100% of the window, but it only occupies 1200px. I don't know why it's shown like that. Here you have the CSS Code
#navigationposition {
float:left;
color:#fff;
width: 100%;
height:200px;
position:relative;
bottom:0;
left:0;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-repeat: no-repeat;
background-position: 100% 0;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg");
}
Here's the link to the website
Your div id=#container restraints the footer to not exceed 1200px. This is happening here :
#container {
max-width: 1200px;
background-color: transparent;
margin: 0 auto;
}
You can either take the content of your footer out of the container or remove max-width:1200px from container rule.
Hope this help.
This means that you are placing this div ( navigationposition ) inside another one which has a fixed width, and is limiting your DIV.
If you cannot access to the code that is framing yours, ( few websites don't let you change container ) then the only possible way I think is to make this DIV ( navigationposition ) absolute with bottom=0 ( the result wont be the same when you scroll)
If you can haveaccess to all code, then change the width of the div that contains the div ( navigationposition )
/*if you can change it*/
#container {
/*width:1200px;*/
width:100%;
}
/*Only if you cannot change its container*/
#navigationposition {
float:left;
color:#fff;
width: 100%;
height:200px;
position:absolute;
/*position:relative;*/
bottom:0;
left:0;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-repeat: no-repeat;
background-position: 100% 0;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg");
}
Your footer is inside a div#container with a 1200px width.
Move out your div#navigationposition from the div#container and it should be alright ;)
use position absolute and height:100vh. it seems done with this
I set the body to:
body { background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;}
and it displays my background but when i set this code:
body {
z-index: -1;
background: #425b77; }
#myBody {
background-image: url(file:///Volumes/HDD/photomadness_remixed/css/Flavours_400812054.jp2);
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: 0;
}
it just would not display the background and instead just displaying the color i set on the body tag.
Any idea how to solve this?
Edit:
When i look at this code on another webpage i have it works correctly and i have written the exakt same thing.
This is my result from code at the second line:
https://www.dropbox.com/s/ioo1cnfszdzh0wu/Skärmavbild%202014-03-07%20kl.%2018.44.33.png?m=
This is the result i get from the code at line 8 and downwards:
http://www.dropbox.com/s/d8wjnwt346gzdv3/Skärmavbild%202014-03-07%20kl.%2018.44.02.png?m=
Edit:
If i add content inside the <div id="myBody"></div> then it will be blurred too because i want a blur filter on it.
try this :
body {
background: #425b77; }
#myBody {
background:url(your picture) no-repeat center center scroll;
background-size: cover;
-moz-background-size: cover;
width:50%; height:50%;
display:block;
position:fixed;
z-index:1001;
}
this is just example... change position width and height as you wish
You forgot to add Height and Width (or add the content do that div).
When i choose a image to put as a background of my div i can't manage to make it look normal. The width and height of my header are made with em. Can someone explain me how i can get a image as a background at my header when the header is like: 120em width. 5em height. So i need to make a normal header background the size of my header.
.header{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url('images.jpg');
text-align: center;
width: 120em;
height:5em;
background-size:100%;
}
.left{
background-color:red;
float: left;
width: 20em;
height: 51em;
}
.middle{
background-color: green;
width:120em;
padding:0px;
margin:0px;
height:51em;
}
.footer{
height:4em;
width: 120em;
background-color: blue;
}
Check here, http://css-tricks.com/perfect-full-page-background-image/
DEMO http://jsfiddle.net/yeyene/PtEnY/3/
#yourHeader{
float:left;
width:120em;
height:5em;
background: url(images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-background {
background: url(image/bg.jpg) no-repeat center/cover;
}
I think I understand what you are try to achieve, the above is what I use, just drop it on the highest level div where you want the background image and it should stay relatively "in frame" as the page scales. You way want to add a bit to this for compatibility but the above is the general gist.