I am working on front end and I have attached a background image on the login page. I want to show 100% width and height of the screen to that image but with my codding there is a vertical bar which I want to remove. CSS code of my file is given below
.Public_background {
background-image: url("public_Background.jpg");
margin-left: auto;
margin-right: auto;
/*background-color: aliceblue;*/
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height:100%; */
height: 100vh;
position: relative;
max-width: 100%;
max-height: 100%;
}
This is the method I use for this propose
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I took it from here.
example
if you are using full screen div you can add this code to your div styling
.Public_background {
overflow:hidden;
}
Here is a working fiddle the scroll is because of gutter margin -:
body{
margin: 0;
}
.container{
width: 100vw;
height: 100vh;
}
.Public_background {
background-image: url("https://picsum.photos/600/300");
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class="container">
<img class="Public_background">
</div>
Related
Im trying to set a background image and set this to be full witdh but im only getting to see it centered.
.wrapper-hero {
width: 100%;
height: auto;
max-width: 1920px;
}
.wrapper-hero .hero-image {
background: url('#{baseDir}images/hero-image.png') no-repeat top center;
background-size: contain;
background-repeat: no-repeat;
display: block;
background-size: cover;
height: 800px;
width: 1200px;
}
<div class="wrapper-hero">
<div class="hero-image"></div>
</div>
Any ideas? And the image is not responsive at all...
You're using background-size multiple times. Try this code.
.hero-image {
background: url('#{baseDir}images/hero-image.png') no-repeat center center fixed;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I just want my hero image to fit 100% height (I have used 500px height is fiddle because that's how its working otherwise just NO output) and doesn't care about the width so that it takes whole screen on desktops as well as mobiles. I referred to other questions out there but they didn't solve my issue.
Here's the fiddle:
https://jsfiddle.net/qrgLvaue/
.hero-image{
background-size: cover;
background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
height: 500px;
-o-background-size: cover;}
Just update your code to height: 100vh; and put background-size: cover; after your background shorthand property.
.hero-image{
background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
}
https://jsfiddle.net/qrgLvaue/1/
html, body {
height: 100%;
box-sizing: border-box;
margin: 0;
}
body {
background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center;
background-size: cover;
}
html, body {
height: 100%;
box-sizing: border-box;
margin: 0;
}
body {
overflow: auto;
counter-reset: i;
}
div {
background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
div:after {
counter-increment: i;
content: counter(i);
color: white;
font-size: 10em;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
I need to center a div (undefined width) horizontaly and vertically inside a fullscreen div.
I have the code below.
outer div:
background: #000 url('header.jpg') no-repeat center center /* fixed */;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: relative;
text-align: center;
width: 100%;
inner div:
left: 50%;
margin-top: -300px;
margin-left: -300px;
max-width: 600px;
position: absolute;
top: 50%;
z-index: 2;
But it is not clean - especially when I resize the window. And this is somehow not centered vertically.
Could you help me with this?
Thank you!
Don-t use position:absolute in this case. You don't have to use z-index because the child will always stay in front of the parent by default. It wasn't your case because the parent was relative and the child absolute and position:relative was giving a greater stacking order for the parent.
So, if your inner div is 50% width and height of the parent, write top:25% and margin:0 auto;
If it was 70%: top:15%; margin:0 auto;
html, body{
width:100%;
height:100%;
}
.outer{background: #000 url('http://lorempixel.com/g/400/200/') no-repeat center center /* fixed */;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.inner{
height:50%;
width: 50%;
position: relative;
top: 25%;
background:red;
margin:0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
The easy fix is:
<outerdiv><center><innerdiv></div></center></div>
but a margin of '0 auto' is the correct way to center the div
innerdiv {
margin:0 auto;
}
You can then adjust the top and bottom accordingly
I want background image fit with the height of the div, there's a way to do that? background-size:cover; fit only with the width and height autoscale (I need the opposite effect).
Thanks.
I know this is an old answer but for others searching for this; in your CSS try:
background-size: auto 100%;
background-size: contain;
suits me
try
.something {
background: url(images/bg.jpg) no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100;
}
body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(../images/bg-404.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Try This
body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
<body class="bg">
</body>
I just had the same issue and this helped me:
html {
height: auto;
min-height: 100%;
background-size:cover;
}
This style helped me to fully fit image by height:
body {
background-image: url("/static/img/grass.jpg");
background-repeat:no-repeat;
background-size: cover;
min-height: 100vh;
}
I am trying to setup a fluid template that I can use for responsive design viewports too. However now when I try to resize my browser window it does not scale and on my iphone i just see the top left part of my header graphic. I have a main wrapper background and a header animated gif that are both the same width of 1200px. Any help would be greatly appreciated.
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
css
body {
background-color: #B28D66;
margin: 0 auto;
}
#Wrapper {
max-width:1200px;
width:95%;
background-image: url(../img/background_main.jpg);
background-repeat: no-repeat scroll;
background-position: center top;
height: 2200px;
position: relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Banner {
width: 100%;
height: 350px;
background-image: url(../img/animated-gif-header.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Wrapper #Content {
width: 75%;
margin: 0 auto;
}
#Wrapper #MainNav {
background-image: url(../img/nav_bar.png);
width: 100%;
height: 75px;
margin-top: -20px;
}
#Wrapper #MainNav ul {
margin-right: 100px;
}
#Wrapper #MainNav ul li {
float: right;
margin-top: 15px;
padding-right: 21px;
try using the background-size property in the following manner:
background-size:100% auto;
or use the below if you want to have its height covering the whole page height
background-size:auto 100%;
background-size: cover;
works just fine for me.
background-image: url('');
background: no-repeat center center cover;
This usually works fine.