https://ibb.co/m9QvTND
Live
http://nafidev.com/t1/
Background image is overflow footer.
body {
background-image: url(../img/planet.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Footer:
.footer {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #2c3e50;
color: #fff;
}
Footer will stay in the last. I don't want to fixed the footer, then content will go under footer.
I'm not sure why the body bg is overflowing, but if you want the planet background to stop with the footer, you can wrap the HTML inside of another element and apply the background setting to that element.
<body>
<div class="main-wrapper">
<nav class="navbar navbar-default navbar-fixed-top">...</nav>
<!-- Image Section -->
<section class="page-section portfolio" id="portfolio">...</section>
<!-- Copyright Section -->
<section class="copyright py-4 text-center text-white">...</section>
</div> <!-- close main-wrapper -->
</body>
Then you can style the main-wrapper element instead of the body
.main-wrapper {
background-image: url(../img/planet.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Related
I'm just trying to get an image to resize to stay within it's div, but it continues to spill over onto the div below when I reshape my browser size or view in my laptop.
I haven't set any fixed dimensions. I am using bootstrap v5 and tried 2 image classes in the code.
I realise my code may contain some unrequired items and doubling of commands etc., but they are all things I tried with no avail. An example screenshot of my issue.
The only thing I've not yet done (and is my last option if I can't get the image to scale within the divs) will be to create more breakpoints and corresponding CSS for them. However the image doesn't spill out of it's divs on mobile devices and seems to in part be responsive - so I'm not sure if this is necessary. And it seems like there should be a simpler solution to what I'm trying? Perhaps not.
Many thanks.
#cover2 {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("https://www.kelvindalewhisky.com/public/img/2.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding-top: 50px;
display: flex;
}
.wrapper {
padding-top: 100px;
height: 100%;
width: auto;
display: flex;
margin: auto;
}
.wrapper img {
height: 80%;
width: auto;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section id="cover2">
<div class="container">
<div class="row">
<div class="wrapper">
<div class="col-md-12">
<img src="https://www.kelvindalewhisky.com/public/img/kelvindalegold.png" alt="..." class="img-fluid" class="img-responsive">
<br><br>
<span style="font-size: 60px; color: #ec894b;"><i class="fas fa-chevron-down icn_blue wow shake" data-wow-duration="1500ms"></i></span>
</div>
<!-- container ends-->
</div>
</div>
<!-- row ends-->
</div>
<!-- container ends-->
</section>
You set 2 times the attribute class.
Try with <img src="public/img/kelvindalegold.png" alt="..." class="img-fluid img-responsive">
My webpage have 4 background images, each of them needs to be a full screen. On each background, I have some labels and texts. Here is the CSS code, I will address the issue after the code section.
html{
height:100%;
}
body{
font-family:'Roboto', sans-serif;
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
height:100%;
}
.section{
background-attachment:inherit;
background: no-repeat center center fixed;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
By using this style. All background images can take full screen. However, when I resize the browser window to a small height, my labels $ text on background 1 starts to across background 1 and background 2.
If I delete the "height:100%" or using "min-height:100%" instead. Each background image will never get to full screen but I will not get my labels & text across two consecutive background images when I resize the browser window to a smaller height. Please help
Here is my HTML for the first two image background. I need each image background to take full screen on any device, with my text fields look good on each background. Here my issue is, when I shrink the height of the browser, some text will disappear (covered by the next background) due to the height of the text field > height of browser
<!-- Page Top Section -->
<div id="page-top" class="section" data-background-image="/images/background/page-top.jpg" style='background-image: url("/images/background/page-top.jpg");'>
<div class="pattern height-resize">
<div class="container">
<h1 class="site-title">
hello I am site title
</h1><!-- /.site-title -->
<h2 class="section-title">
hello I am section-1
</h2>
<div class="next-section">
<a class="go-to-about"><span></span></a>
</div><!-- /.next-section -->
</div><!-- /.container -->
</div><!-- /.pattern -->
</div><!-- /#page-top -->
<!-- Page Top Section End -->
<!-- About Us Section -->
<section id="about" class="section" data-background-image="/images/background/about-us.jpg" style='background-image: url("/images/background/about-us.jpg");'>
<div class="pattern height-resize">
<div class="container">
<h3 class="section-name">
<span>
SECTION NAME
</span>
</h3><!-- /.section-name -->
<h2 class="section-title">
SECTION TITLE
</h2><!-- /.Section-title -->
<p class="section-description">
FJDKLASJLKFJASDKLJFLKSJFLKDJSAKLFJDLKSAJ
</p><!-- /.section-description -->
<div class="next-section">
<a class="go-to-subscribe"><span></span></a>
</div><!-- /.next-section -->
</div><!-- /.container -->
</div><!-- /.pattern -->
</section><!-- /#about -->
<!-- About Us Section End -->
section title css:
.section-title{
text-align:center;
text-transform:uppercase;
font-weight:300;
font-size:80px;
}
If you want four divs with 100% screen size in width and height with different backgrounds that can accept any HTML inside and will fit all screen sizes, there is traditional way to do so:
Preview: http://codepen.io/kunokdev/pen/LRPPdO
HTML:
<section>
<div>Any HTML inside a first div w/ background</div>
<div>Any HTML inside a second div w/ background</div>
<div>Third is here too!</div>
<div>
<h1>Forth</h1>
<p>Forth has even more than that!</p>
</div>
</section>
CSS:
html, body {
height: 100%;
}
section {
height: 100%;
}
div {
height: 100%;
background-size: cover;
}
div:nth-child(1){
background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(2){
background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
div:nth-child(3){
background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(4){
background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
or else with viewport units:
HTML:
<div></div>
<div></div>
<div></div>
<div></div>
CSS:
div {
height: 100vh;
}
So I think you need background-size: cover; and maybe a little bit of background-position property too. In case your content overflows, consider using overflow: auto.
Additionally:
If your viewport height and width are smaller than the html inside containers, consider using media queries.
For example if your content overflows when height is 500px use query such as
media only screen and (max-width: 500px){
div {
height: auto;
}
}
Consider using Mozilla Firefox responsive design view when testing. Similar feature exists in Chrome too.
Then your contents will no longer be 100% after viewport max-width of 500px, instead they will be as large as contents inside.
I want to have a background image to fill the entire width of the screen (not the height though) like on these websites: http://www.rokivo.com/ and
https://teemo.gg/
My current structure looks like this:
<header class="navbar navbar-default" role="navigation">
<div class="container">
Code for header
</div>
</header>
<div class="container">
Rest of page contents here
</div>
Am I going to have to wrap everything else in a div with class container and use that to specify the background-image? Or is there another way I can do this?
You could do something like the following:
HTML:
<header class="navbar navbar-default" role="navigation">
<div class="header-content">
Code for header
</div>
</header>
<div class="container">
Rest of page contents here
</div>
CSS:
header {
width: 100%;
background: url(https://unsplash.it/2000/1000/?blur) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header-content {
padding: 5em 0;
font-size: 2em;
text-align: center;
}
So what's going on here? The wrapping header has a width of 100% in order to cover the entire width of the screen and has a background image as well. Also, it's set to no-repeat and centered vertically/horizontally, as well as background-size set to cover to allow as much of the image to show as possible.
On the .header-content, a padding is added to the div so that it is vertically centered.
The padding, text size, etc can be adjusted, but this should give you a general idea of how this effect is accomplished.
To see it in action, see this codepen.
you can do something simple like:
<header>
<nav class="navbar navbar-default" role="navigation">
<!-- nav stuff -->
</nav>
<div class="main-container">
Code for header
</div>
</header>
<div class="container">
Rest of page contents here
</div>
.main-container {
background: url(htts://someimage.com/1.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: auto; // or like the teemo site - height: 500px;
}
here's a good read on CSS-Tricks
within body I have sections...I expected body to get the whole height: section1.height+section2.height+... but it only gets the top sections height.what am I missing? jsfiddle
<!-- Header -->
<section id="top">
<div class="container">
<div class="row">
<div class="col-lg-12">header</div>
</div>
</div>
</section>
<!--mission-->
<section id="mission" class="mission">
<div class="container">
<div class="row">
<div class="col-lg-12">mission</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact" class="contact">
<div class="container">
<div class="row">
<div class="col-lg-12">contact</div>
</div>
</div>
</section>
You are looking for min-height on your html and body. Using height: 100% makes the html and body height wrap around all of your content up to the height of the screen/viewport. Using min-height: 100% makes the html and body height equal at least the height of the screen/viewport, and can also expand downward to fit overflowing content.
JSFiddle
html, body {
min-height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
}
NOTE - Try to avoid using !important unless it is absolutely necessary. It will create problems down the road if/when you need to override the styling on something for a single page.
You can set your header section.top to the viewport height by using 100vh. Then you can remove the height: 100% of html and body, and they will stay fluid (fiddle):
html,body{
margin:0;
padding:0 ;
}
#top {
width: 100%;
height: 100vh;
background: #802818;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo