I am building a simple landing page where the visitor would see a banner, a background image below it and a couple of buttons located vertically beneath each other.
The problem I am experiencing is that, at the moment, both the banner and the background image are starting from the same position (the top left corner of the web page), thus part of the background is hidden by the banner.
The code I currently have is:
<style>
body {
background: url("http://url.to/background") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
}
#Wrap {
position: absolute;
}
</style>
<body>
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
</body>
The expected result is to have the banner image take the beginning of the page while fitting into the screen without causing any extra scroll to appear. What is more important is to have the background start after the banner.
A fiddle could be found at the following URL:
https://jsfiddle.net/morL1zka/
Any help or ideas would be appreciated.
you should use background-position-y for this, and you need to set value which is equal to the height of the banner
body {
background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0px;
margin: 0px;
background-position-y: 100px;/*the value must be the same height as the banner */
}
#Wrap {
position: absolute;
}
<div id="Wrap">
<img src="http://url.to/banner" />
</div>
You can easyli solve this using JavaScript. The Backgroundposition will be automatically set under the banner, without knowing the height of it.
var body = document.getElementById('body-margin');
var banner = document.getElementById('banner');
body.style.backgroundPositionY = banner.offsetHeight + 'px';
body {
background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
}
#Wrap {
background-color: #345370;
text-align:center;
}
<body id="body-margin">
<div id="Wrap">
<img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" />
</div>
</body>
Here is also your updated fiddle: https://jsfiddle.net/morL1zka/2/
Related
this the code that i have written and it didn't work , my problem here is that code work but the image did not appear as it supposed to
.about-bg{
background: url(../img/about.jpg) no-repeat top center fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
background-position: top center;
}
this isn't go well
this the result that i had
Can't tell from your question, but you must ensure body margins and padding are both set to zero if you want any element on the page to cover the entire page.
If this element is contained within another element, that element must allow the image of expand beyond its borders or that element must be full-sized too.
Here is an example that sets a solid blue picture as the background image within a div:
body {
margin: 0;
padding: 0;
}
.about-bg {
background: url(http://via.placeholder.com/150/0000FF/808080) no-repeat top center;
background-size: cover;
height: 100vh;
width: 100vw;
}
<div class="about-bg"> </div>
From the question I presume you want the image to take up the entire background. I tried your code on a few pictures it seems it is because the picture dimensions don't match the screen so try this code ans see if it helps.
.about-bg {
margin:0;
background: url(backpic.png) no-repeat;
width:100%;
height:100%;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
try removing !important. It should let you take 100% of width
I've added an background to a div class. What I want is for the image height to always have the same height as the browser window, which I tried to achieve with min-height= 100%. I don't get it to work though.. Any suggestions?
HTML:
<div id="top" class="jumbotron">
</div>
CSS:
.jumbotron {
background: no-repeat center center url('top.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
margin: 0px;
}
Add this to your jumbotron class:
min-height: 100vh;
Working fiddle: https://jsfiddle.net/dgo3sz0a/
The body and the html have to fill the 100% height:
html, body {
height: 100%
}
Hopefully this will be a quick question. I wanted to add an image to my landing page that scales to any screen. I found this code to be the suggested and most optimal method
html {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
However I am having problems implementing this. This code does what it is supposed to, however if I set it under html then this image takes place anywhere I call html in my site which I dont want. I want this to occur in one page of my site only. I tried creating my own custom html tag bodycover {} but that didn't work.
I am new to this and have not taken a step into custom html tags yet. I feel like there is an easy solution to this but I can't find it despite researching it thoroughly.
Thanks
EDIT: If there is a simply way to get this working without a custom element that would be even better. I simply don't know of one
Like #Paulie_D said, you don't need to apply this to the html tag; a standard div will work. Also, give the new element some dimension to width and height. Slightly cleaned up:
.bg {
width: 100%;
height: 100%;
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Make sure the parent element of .bg has a height and width of 100% as well.
Why not do like this, where you add an attribute or class to the body for the particular page.
This can be done either server side, using i.e. ASP or PHP, or client side, in the page load event.
Page to show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body class="big-bkg">
</body>
Page to not show
body {
background-color: #ddd;
}
.big-bkg {
background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<body>
</body>
I'd say: put all that stuff into body, not html
body {
background: url('image/img.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can make it with a simple absolute div with width and height 100% just after the body tag and z-index lower than the main-container.
html,
body {
padding: 0;
margin: 0;
position: relative;
height: 100%
}
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg') no-repeat center center fixed;
background-size: cover;
}
.main-container {
position: relative;
width: 80%;
background-color: red;
height: 80%;
margin: auto;
z-index: 3;
}
<div class="bg"></div>
<div class="main-container"></div>
I am testing out the parallax scrolling effect, in which there is a background picture and by scrolling, you can see different parts of the picture. The problem is, when I zoom out the page, the picture repeats, which is ugly. I have tried no-repeat; and it only makes the picture stay in one corner, and I have tried background-size: cover; which makes the page scrollable to sides which I don't need.
How to deal with this?
EDIT: I'm sorry for forgetting to post the code.
HTML & CSS:
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
<section class="parallax">
<div class="parallax-inner">
<h2>My First Heading</h2>
</div>
</section>
Example: http://prntscr.com/9jv8d4
Zoomed out: http://prntscr.com/9jv8sd
No-repeat; http://prntscr.com/9jv94p
Cover and on 1920x1080 screen, default 100% zoom; http://prntscr.com/9jv9ur (page is scrollable to the far right side)
try to change your css code to be as following:
body {
margin: 0;
}
.parallax {
background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
i tested it on my own and works fine, hope this will help you.
resource will be useful for you:
https://css-tricks.com/perfect-full-page-background-image/
just use
body{
margin: 0;
padding:0;
}
I have no idea why my background image is not showing. I can't see the image in dev tools and I'm stumped. It's in the folder and pointing to the right folder. Any help is appreciated! Here is my code:
html:
<body>
<div class="l-head-backImage"></div>
<div class="container">
<header>
<h1>This is the Header</h1>
</header>
</div><!-- container -->
css:
.l-head-backImage {
background: url(../images/Seattle.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You are telling it to cover the div; however, the div has no actual size because it has no content in. Therefore, you need to specify a width and height of the div so the image actually has something to cover.
Example with your code and a random dog picture: JS Fiddle
CSS
.l-head-backImage {
background: url(../images/Seattle.svg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
width: 300px;
}