My background image is cutting off my text when the screen size is adjusted smaller. The background image is also not 100% of the screen height when viewed in large screens. What am I doing wrong?
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
background-size: cover;
max-height: 1200px;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Add min-height:100% for .slider class and add height: 100% for their parent body tag.
Remove width, overflow, height in .slider class.
Should be -
body {
height: 100%;
}
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
Related
My question is about "background-image" in CSS. How can I add "background-image" in full screen? I used "width: 100% " but it doesn't work.
html,body{
height: 100%;
}
body{
background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body {
background: url(http://i.imgur.com/aZO5Kolb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
html {
height: 100%
}
This image is too big, I want it to fit the size of the window: http://zgaming.comxa.com
but I do not understand how, I also tried height and width 100%
html
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></img></div>
css
.bgimg {
position: absolute;
top: 0;
left: 0;
z-index:-99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried this
.bgimg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:-99;
}
.imgbg {
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This answer
https://stackoverflow.com/a/43612299/7874902
works but on mobile there is some white space at the bottom..
You should set
background-image: url("http://zgaming.comxa.com/dist/img/bg.jpg");
and try with
background size: contain;
as with cover it's possible it cuts a part of the image.
check this:
w3schools.com/cssref/css3_pr_background-size.asp
Hope this code spinet help you.
.bgimg {
width: 100%;
margin: 0;
padding: 0;
}
.bgimg img {
position: absolute;
top: 0;
left: 0;
z-index: -99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></div>
This solution is purely meant to only show how to try and fill the viewport with a single image, no extras.
We use min-height: 100vh to tell the body tag to be as tall as the viewport. we use background-size: cover to center the image an have it fill all of the body element, cropping if necessary but maintaining aspect ratio.
body {
margin: 0;
height: 100vh;
background-image: url( 'http://zgaming.comxa.com/dist/img/bg.jpg' );
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
There's one major thing you have to realize with trying to fill a viewport, especially viewports with varying aspect ratios; you'll either have to crop part of the image at some point or distort it. Below we chose to crop it over distorting it.
You can't use background-size: cover on a img tag.
Just try to make background-image with yours and make div size at 100% on width and height.
You can make this rule directly on body :
body {
background: url(./path_to_your_image) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background: url('http://zgaming.comxa.com/dist/img/bg.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
}
html{
height: 100%
}
I have a banner div:
<div class="background" style="background: url(<%= #banner.image.url(:big) %>) no-repeat"></div>
and corresponding css:
#banner {
width: 100%;
height: 275px;
}
#banner .background {
width: 100%;
height: 275px;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
uploader.rb:
version :big do
process resize_to_fill: [1920, 280]
end
On smaller devices, the background-image is cropped, here are the screenshots. Full width:
And a resized window:
Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.
Just use background-size: contain for this
#banner .background {
background-size: contain;
}
try background-size: 100% auto;
I'm trying to cover up a html body background image by another image. I used z-index but can't get it working. Am I missing something or just can't understand what I'm doing.
See sample code below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://lorempixel.com/output/food-q-c-640-633-1.jpg');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}
.content {
/*height: 700px;*/
height: 100vh;
background:rgba(255,255,255,0.5);
/*margin-top: 20%;*/
}
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
Additionaly, inside the main-content are divs with 100vh and
background opacity
Main content images should be on top of everything including the content div with background opacity.
Use 100% width and height on #main-content, like:
#main-content {
width: 100%;
height: 100%;
}
Have a look at the snippet below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
width: 100%;
height: 100%;
}
<div id="main-content"></div>
Hope this helps!
It will work if you define a height for the div with CSS. Or insert content so it will expand vertically.
A background image makes sense for an element that contains more content, otherwise you can insert the image with <img>
You mean something as below, if so then set #main-content height:auto and it works fine, if you set height:100% then it takes that as 100vh, which on scroll hides image placed at top, so try as below.
So now #main-content height:auto calculates and takes height assigned to child elements present inside it and the background image which is assigned to this div #main-content can be seen only till height of 100vh, after that the default image that is assigned to body get visible.
body, html {
margin: 0;
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height:auto;
}
.content {
height: 100vh;
background:rgba(220,60,60,0.6);
color:#fff;
}
<div id="main-content">
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
</div>
I'm trying to have a large background image stretch to the size of the browser window when a user first goes on the site. From this they navigate down through the rest of the site but you don't see it regardless of the size of the browser window without scrolling ( http://whiteboard.is is a good example of this ).
I'm using the code below and while it stretches horizontally it won't stretch vertically past the min-height. Any ideas?
HTML
<body>
<section id="first-section">
</section>
</body>
CSS
body, html {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#first-section {
background: url(1.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
min-height: 768px;
}
May be you can write height:100% also.
#first-section {
background: url(1.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
min-height: 768px;
height:100%;
}