I have a Image which I want that takes the whole screen but is leaving some white space at the top and at the left side of the screen and I don't know why is doing it. I attached the code of it.
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Add this css line:
body{margin:0;}
http://jsfiddle.net/mm08hruf/
You need to reset the margin on the body.
/* margin reset */
body {
margin: 0px;
}
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Try
html,body{
padding:0;
margin:0;
}
Related
i have been trying to solve this for like 2 hours now.. tried multiple guides, nothing worked.
Here is my css:
body {
margin:0;
background:url('chalk.jpeg');
}
html, body {
height: 100%;
}
.welcome{
text-align: center;
position:relative;
height:100%;
background:rgba(38, 36, 15, 0.7);
}
However, for some reason, the page looks like this: https://i.imgur.com/iPvMTk1.jpg
I want the welcome div background to be on top of the body background image until the end of the page. Tried many solutions but nothing would work.
You can do it with viewport units where the body element takes 100% of the viewport height with the height: 100vh, then just stretch the .welcome div with height: 100%:
html, body {
width: 100%;
height: 100vh; /* 100% of the viewport height */
margin: 0;
}
body {
background: url('http://placehold.it/1600x900') no-repeat center center; /* modified */
background-size: cover; /* recommended / also try the "contain" */
}
.welcome {
text-align: center;
position: relative;
height: 100%;
background: rgba(38, 36, 15, 0.7);
}
<div class="welcome">welcome div</div>
I have the following website:
www.thewhozoo.com
It works fine on a desk top, but for some reason on a mobile device's browser, it has a grey bar down the side.
I have the following code:
css
body {
background-color: #4B5961;
width: 100%;
margin: 0;
}
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html
<body>
<div id="image-head" class="top-container">
The grey line down the side is the same as the background color of the body (#4B5961).
As you can see, I have the body width and the background image width both set at 100%. So I would not expect to see the grey line. I think it is a result of the scroll bar.
If anyone can advise how I can remove this, I would appreciate the help.
Check your style this css rule, take out the padding-left: 10px;:
.wz-title {
color: #B2D137;
font-weight: bold;
/* padding-left: 10px; */
font-size: 110%;
text-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 1px rgba(0,0,0,0.4);
}
Remove the padding with .wz-title. For some reason, removing padding fixes it.
.wz-title {
padding-left: 0;
}
Here:
Set overflow-x:hidden; on your body, that'll fix it:
body {
overflow-x:hidden;
}
Try this:
body, body * {
box-sizing: border-box;
}
By using above code you will never face any problem with padding ever. :)
I have a such a situation: http://jsfiddle.net/5axmtw9g/3/
<div class="content inner clearfix1 has-left-sidebar">
<div class="sidebar-left-menu prepended"></div>
<div class="content-middle">
<section id="about-stat" class="clearfix1 about-stat-section">
<h1>Some title</h1>
</section>
</div>
</div>
.inner {
margin: 0 auto;
width: 600px;
}
.content.inner {
position: relative;
}
.content .sidebar-left-menu {
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
float: left;
width: 160px;
}
.sidebar-left-menu {
background: #3b86c4 none repeat scroll 0 0;
color: #fff;
}
.content-middle {
margin: 0 0 10px 170px;
}
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat fixed 0 0;
height: 590px;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
}
As you can see in the fiddle the fixed background image is positioned to the window not to the wrapper. I would like the image to be positioned at the start of "content-middle" div, as expected. Using any solution with background-size:cover is not working for me, as I shall avoid of image stretching.
Would be really grateful for help as I stacked on this and can't find a working solution.
Thanks in advance!enter code here
Try jquery
posBg();
$(window).resize(function() {
posBg();
})
function posBg(){
var posLeft=$('#about-stat').offset().left;
var posTop=$('#about-stat').offset().top;
$('#about-stat').css("background-position", posLeft+"px "+posTop+"px");
}
Fiddle demo http://jsfiddle.net/5axmtw9g/9/
I think you can achieve what you want by adjusting your background to the following:
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat center top ;
background-size: 100% auto;
The center-top will position the background to the right place. the size will display it at 100% width without adjusting the aspect-ratio. Now you just have to go for a bigger height div to show it full size (or a different background-image).
Demo
Background image X AXIS is 50% plus half the width of it's sibling container
https://codepen.io/AliKlein/pen/dVrmVO
section {
height: 100vh;
background-image:
url(https://source.unsplash.com/collection/194676/3);
background-size: cover;
background-attachment: fixed;
background-position-y: center;
background-position-x: calc(50% + 12.5vw);
}
I have the following CSS code:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 900px;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this http://i.imgur.com/RMyIO4Y.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that?
Thanks.
You can also set the height to
height: 100vh;
http://caniuse.com/#feat=viewport-units
Example css for Hero template:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 100vh;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
Use this:
background-size: 100% 100%
This should stretch it to 100% of both X and Y.
Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.
Imagining the div with the video part has a class of 'video-section', you could do:
#media (max-width: 600px) {
.video-section {
display: none;
}
}
I have a div which contains a background image coming from the css.As per my need i have to show this div after 77px; from the top.So i have added padding-top:77px; in my css but the background image is not coming below or after to 77px; instead it is coming from top only and getting repeated.If i am adding background-repeat: no-repeat; then it is leaving 77px; space down in the Div and again it is coming from top only..
Here is the HTML ..
<div class="header-wrapper">
//Header Div
</div>
<div id="headerbodyimage" class="headerbody-wrapper">
//Header body Div
</div>
And Here is the css..
.header-wrapper {
position:fixed;
background: url("../img/new_images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;
width: 100%;
height: 77px;
}
.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
z-index: 60001;
padding-top:77px;
width: 960px;
height: 242px;
margin: 0 auto;
}
Please help me ..THanks
Use background-position: 0 77px;
A different approach from other responses, as you're using fixed position for the header wrapper, you could set a padding top for the parent container (body, for example):
body {padding-top: 77px}
Leaving the headbody wrapper:
.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
z-index: 60001;
width: 960px;
height: 242px;
margin: 0 auto;
}
I was about to set up a pastebin sample, but didn't have your real images.
Please check this fiddle
.header-wrapper {
position:fixed;
background: url("http://eshbeata.com/images/backgrounds/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;
width: 100%;
height: 77px;
}
.headerbody-wrapper {
background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
z-index: 60001;
padding-top:77px;
width: 960px;
height: 242px;
margin: 0 auto;
}
I have solved your issue .both the images are coming properly.Now youcan position it using background position property the way you want it.