I know this is kind of a common question here on StackOverflow, but none of the previous answers I have seen are not working. I have this CSS code:
.header{
padding: 0px 0;
position: relative;
display: table;
background-size: 100% 100%;
width: 1920px;
height: 600px;
background-image: url(backgroundheader.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
And then I have created this tag on an HTML file:
<header id = "header">
</header>
but the background image is not appearing. the html and css files are in the same folder in which backgroundheader.png is located.
You assigned id to header element and in css you defined property for header class.
Just change .header to #header
#header {
padding: 0px 0;
position: relative;
display: table;
background-size: 100% 100%;
width: 1920px;
height: 600px;
background-image: url(https://lorempixel.com/1000/1000/);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
<header id="header">
</header>
or id='header' to class='header' :
.header {
padding: 0px 0;
position: relative;
display: table;
background-size: 100% 100%;
width: 1920px;
height: 600px;
background-image: url(https://lorempixel.com/1000/1000/);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
<header class="header">
</header>
There are multiple ways of achieving this
1st Method:
HTML
<header class = "header">
</header>
CSS
.header{
padding: 0px 0;
position: relative;
display: table;
background-size: 100% 100%;
width: 1920px;
height: 600px;
background-image: url(backgroundheader.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
2nd Method
HTML
<header id = "header">
</header>
CSS
#header{
padding: 0px 0;
position: relative;
display: table;
background-size: 100% 100%;
width: 1920px;
height: 600px;
background-image: url("backgroundheader.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
3rd Method:
HTML
<header>
</header>
CSS
header{
padding: 0px 0;
position: relative;
display: table;
background-size: 100% 100%;
width: 1920px;
height: 600px;
background-image: url(backgroundheader.png);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
If it is
class => .header
id => #header
header tag => header
You have declare a css class but used it as a id.
So this css not working.
try this in html page
<header class= "header">
</header>
change your html:
<header class = "header">
</header>
or your selector:
[id="header"]
or
#header
BTW. If you have only one header you can write header as selector
You also can use body>header (for main header) etc. You probably do not need ids and classes.
BTW.
You can remove this:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
https://caniuse.com/#feat=background-img-opts all green!
u need to change from **class to id symbol :**
#header {
.....
}
<header id="header">
</header>
Related
I am editing a websites original theme, and have presently run into an image that is cropped vertically inside a div
See codepen or example below: https://codepen.io/hioioasd90/pen/LzvmpW
I would like for this image to display in its entirety, but be scaled to the outside containers set width.
After editing the chrome console, changing height: 27vh; to a larger number will result in the image showing more inside the div, however it beings to go beyond the boundaries of the max width.
.container {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.img-cover-category {
background: none no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
<div class="container">
<div class="img-cover-category" style="background-image: url(https://writernikhilpro01.files.wordpress.com/2015/08/unsplash-laptop-desk.jpg);"></div>
</div>
Depending what you would like to achieve, first you could delete doubled:
background-size: cover; // this is doubled in the css code
and add:
background-size: contain; // new version for every browser
And from this point try to adjust the size of the image.
Here is what you can delete:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
}
And paste this instead:
.img-cover-category {
background: none no-repeat center;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 27vh;
width: 100%;
margin-bottom: 0px;
}
Then if the scaling should leave the image fixed to the top and not center in the middle you can change this:
background: none no-repeat top;
ADJUSTMENT TO NEW SITUATION vesrion A
Instead of adjusting height of the image set a height of the container
.container {
max-width: 1000px;
height: 1000px;
margin: 0 auto;
position: relative;
border: 1px;
border-color: #000;
border-width: 1px;
border-style: solid;
}
.img-cover-category {
background: none no-repeat top;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
position: relative;
z-index: 0;
padding: 0;
height: 100%;
width: 100%; /* Currently this seems to be obsolete */
margin-bottom: 0px;
}
Also adding min-height: lets say 1000px to the .img-cover-category seems make the background visible aswell...
To be honest I don't know what this will be a header, a background - maybe you could add a normal image instead of background.... if you want it to be visible all the time...
My background image is not covering the full page when I type in my nav bar. I have set the background width and height to 100%, which I thought would solve the problem.
https://jsfiddle.net/oefu0rmk/
CSS
#intro {
background: #151515 url(../img/b1.jpg) no-repeat center bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: 650px;
background-attachment: fixed;
width: 100%;
height: 100%;
min-height: 720px;
display: table;
position: relative;
text-align: center;
}
.intro-overlay{
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #111111;
opacity: .85
}
HTML
<nav>
about me
about my parents
My hobbies
</nav>
<body>
<section id="intro">
<div class="intro-overlay"></div>
<div class="intro-content">
<h5>Oh, hi there! My name is Tatsu</h5>
<h1> (Tah-T-Su)</h1>
<a class="button stroke smoothscroll" href="#about" title="about me button">find out more about me</a>
</div>
Your code doesn't match your fiddle. The problem is you are not adding the background to the whole page, rather to the #intro element. There is copy outside of this <section>.
Add this to your fiddle and it will extend to the full page:
body {
background: #151515 url(../img/b1.jpg) no-repeat center bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: 650px;
background-attachment: fixed;
}
Try this
html {
background: url(xyz.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body
{
background:none;
}
This will definitely work.
This will work perfect in you global styling sheet.
html, body {
overflow: auto;
}
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'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 have a space at the page's top and I don't know how to remove it.
I have created background image (1,2) in my page example.
But I'm not able to find what the source of this white line. I have modified a lot of settings in css with no result.
Demo in Bootply
Here's my code:
<section id="first">
<h1>TEST!</h1> <br>
</section>
<section id="first1">
<h1>TEST2!</h1> <br>
</section>
#first {
background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
#first1 {
background: url(http://placehold.it/1350x890/FFFF00/&text=photo2) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
Just to highlight what Christina said, this issue is being caused by the top-margin on your h1 element:
Here's a cleaned up version that replicates the problem
.background-photo {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#first {
background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<section id="first" class="background-photo">
<h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
<h1>TEST2!</h1>
</section>
You can fix it by doing either of the following:
1) Adding sufficient padding to the containing section:
.background-photo {
padding-top: 20px;
}
.background-photo {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#first {
background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}
.background-photo {
padding-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<section id="first" class="background-photo">
<h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
<h1>TEST2!</h1>
</section>
2) Removing the Margin on the header:
.background-photo h1 {
margin-top: 0px;
}
.background-photo {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#first {
background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}
.background-photo h1 {
margin-top: 0px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<section id="first" class="background-photo">
<h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
<h1>TEST2!</h1>
</section>