I'm using an image as a full-screen background. When I put a new div underneath the content of the div gets mish-mashed with the image instead of allowing scrolling.
html {
scroll-behavior: smooth;
;
}
body {
background-color: #FBEEC1;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background-image: url(tempbackground.jpg);
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
#title-text {
position: absolute;
width: 500px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
/* divide each margin in 1/2 */
margin-top: -125px;
}
.body-text {
display: none;
/*This will be enables after scrolling with a scroll animation */
color: #BC986A;
width: 100%;
}
.text-width {
margin: 0 auto;
width: 50%;
}
.font-title {
font-family: "Times New Roman", Times, serif;
}
.font-body {
font-family: Arial, Helvetica, sans-serif;
}
<div id="header">
<img id="title-text" src="Logo-text.png">
</div>
<div class="body-text" id="font-title">
<h2 class="text-width">Our Forests Are Under Attack!</h2>
<p class="text-width" id="font-body">Sample text that should display below image.</p>
</div>
For what i understood, you want that the page you first up see after opening your file in browser to be blank and when you scroll down you see your content.
for this make a empty container
<div class="empty-page"></div> and set its height in css file to 100 vh( viewport height ).
.empty-page {
height: 100vh;
}
<body>
<div class="empty-page"></div>
<!-- your rest of the code -->
<h1>THIS IS A HEADING</h1>
</body>
Related
I'm new to CSS and html and I'm doing my hero section right now but when I add a image to the hero section the image is loaded way beyond the header limits. How can I make so everything in the page is aligned to the header and doesn't go over "boundaries".
example: https://prnt.sc/10wn3io
You can set width and margin: 0 auto; to the containers. And also you should set object-fit: cover to resize your image.
.container {
width: 300px;
margin: 0 auto;
}
img {
object-fit: cover;
width: 100%;
height: 250px;
}
body {
background-color: #ecf0f1;
}
.menu {
height: 50px;
background-color: #e67e22;
text-align: center;
color: #ffffff;
line-height: 50px;
font-size: 30px;
font-family: sans-serif;
}
<body>
<div class="container menu">
Menü
</div>
<div class="container">
<img src="https://loremflickr.com/cache/resized/65535_50917877588_9db3484f10_c_640_360_nofilter.jpg">
</div>
</body>
If this solution does not work, we can find a better solution if you share your code.
img {
object-fit: cover;
width: 100%;
height: 300px;
}
/* if you want to cover the background by image then
add `background-size:cover;` */
}
The header of my blog shows the title with an image behind. I want that this image have it's own height until it gets bigger than 50vh (50% of user viewport).
But the normal behavior is the image be cropped from bottom and I want that the image be cropped from top and bottom (in other words: I want the image vertically centered).
I could do this with top: 50%; transform: translateY(-50%) but in that case img should be position: absolute and that would make the header always with the same height (since the image couldn't set the height of the element).
This is my code:
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
On the following example, please resize jsfiddle width as much as you can. That will be easier to understand.
https://jsfiddle.net/jkc3L13g/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
max-height: 70vh;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
<img src="http://read.bi/2cMrdUI" />
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>
Instead of <img> tag, use the image as a CSS background image for .header, then set background-size: cover and background-position: center (this will align the image), but you also need to set a fixed height for .header.
This will look a bit different, hope it can help you.
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
JSFiddle: https://jsfiddle.net/jkc3L13g/1/
.header {
max-width: 100%;
position: relative;
overflow: hidden;
min-height: 150px;
height: 70vh; /* fixed height */
background-image: url(http://read.bi/2cMrdUI);
background-size: cover;
background-position: center;
.date {
z-index: 10;
position: absolute;
top: 0;
}
h1 {
position: absolute;
bottom: 0;
z-index: 10;
}
img {
width: 100%;
height: auto;
}
}
/* Just to style.. */
body { font-family: sans-serif; }
.header { color: white; text-shadow: black 0 1px 2px }
hr { margin: 2rem 0 ; }
code { font-size: 1.25rem; padding: 1px 2px; background: lightyellow; }
h1, .date { margin: 10px }
<div class="header">
<div class="date">
Posted 10 hours ago
</div>
<h1>Meet the all new Jaguar F-type</h1>
</div>
<hr />
<p>
Resize window width as much as you can.
</p>
<p>
When <code>img</code> gets too big and <code>.header</code> starts limitating to <code>70vh</code>, <code>img</code> should "vertically centralize".
</p>
I'll try to explain this the best that I can. I'm working on a website right now and I want a background image of one of my divs to fall behind the footer.
I've got it working when the image has a height of 450px but when I try to change it to 350px there is white space between it and the footer. As if there is 100px of space between it and the bottom of the page now.
In Chrome it looks fine no matter the size, but all other browsers it creates white space.
Here is my current HTML and CSS for the footer div and the div that is not working properly.
<div class="testimonials">
<div class="col-md-8 text-center">
<?php dynamic_sidebar( 'testimonial-widget' ); ?>
</div>
<div class="col-md-4">
</div>
</div>
<footer class="navbar-bottom">
<div class="row">
<div class="col-md-12 text-center">
<p class="footer-content">Some content...</p>
<p class="footer-content-mobile">Some content...</p>
</div>
</div>
<img src="/wp-content/themes/tct/inc/assets/footer.png" />
</footer>
.testimonials {
background-image: url('/wp-content/themes/tct/inc/assets/mug.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 350px;
margin-bottom: -300px;
font-size: 24px;
}
footer {
word-wrap: normal;
position: absolute;
bottom: 0;
width: 100%;
}
footer a {
color: #ffffff;
}
footer a:visited {
color: inherit;
}
footer a:hover {
color: #404040;
}
#media (min-width: 981px) {
footer img {
height: 300px;
width: 100%;
top: -9999px;
z-index: 10;
}
.footer-content-mobile {
display: none;
}
}
.footer-content {
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 250px;
margin: 0 auto;
font-size: 20px;
padding-bottom: 10px;
}
.bullet {
margin-left: 20px;
margin-right: 20px;
}
And lastly, here are screenshot of how it's supposed to look (it looks fine in Chrome) and how it's not supposed to look (how it looks in all other browsers).
Correct:
Incorrect:
Hopefully I explained everything enough so you understand my problem. Let me know if I need to provide any additional information.
Links to the images that I am using:
Mug: http://i60.tinypic.com/f4g3t3.jpg
Footer: http://i59.tinypic.com/xfq6x5.png
Try to wrap all this into another container and set explicit height to it and position: relative
.wrapper {
height: 370px;
position: relative;
overflow: hidden;
}
.testimonials {
background-image: url('http://oi60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 350px;
margin-bottom: -300px;
font-size: 24px;
}
footer {
word-wrap: normal;
position: absolute;
bottom: 0;
width: 100%;
}
footer a {
color: #ffffff;
}
footer a:visited {
color: inherit;
}
footer a:hover {
color: #404040;
}
#media (min-width: 981px) {
footer img {
height: 300px;
width: 100%;
top: -9999px;
z-index: 10;
}
.footer-content-mobile {
display: none;
}
}
.footer-content {
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 250px;
margin: 0 auto;
font-size: 20px;
padding-bottom: 10px;
}
.bullet {
margin-left: 20px;
margin-right: 20px;
}
<div class="wrapper">
<div class="testimonials">
<div class="col-md-8 text-center">
<?php dynamic_sidebar( 'testimonial-widget' ); ?>
</div>
<div class="col-md-4">
</div>
</div>
<footer class="navbar-bottom">
<div class="row">
<div class="col-md-12 text-center">
<p class="footer-content">Some content...</p>
<p class="footer-content-mobile">Some content...</p>
</div>
</div>
<img src="http://oi59.tinypic.com/xfq6x5.jpg" />
</footer>
</div>
I managed to find a solution that works for me for now. I'm sure it's not the way to go but it did help.
I added a negative margin-bottom of 100px to my content wrapper and that seemed to do the trick. However, that then screws up Chrome and Safari because they were rendering it properly before. So I used a conditional comment to set the bottom-margin to 0 in Chrome and Safari.
Other answers are of course welcome though!
increase value of height
.testimonials {
background-image: url('http://i60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 560px; //in my case
margin-bottom: -300px;
font-size: 24px;
}
or try it
footer {
word-wrap: normal;
text-align: center;
position: absolute;
bottom: 110px;
width: 100%;
}
So, in my HTML, I've put an Image which is responsive (changes size when browser window is changed). Now, on the top of it, I want to put my title (or you can say text). But the image is only appeared as a strip. It is displayed as a whole when you re-size the window very small. And when I change my text's position to absolute over the image which position is relative, everything disappears.
Here's my HTML:
<style>
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.candh_container .large-header {
background-image:url('http://i.imgur.com/vkfDo1I.jpg');
}
.main-title {
/* position: absolute; */
margin: 0;
padding: 0;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
}
.container_candh .main-title {
text-transform: uppercase;
font-size: 4.2em;
font-family:Montserrat;
}
</style>
<div class="candh_container">
<div class="large-header">
<h1 class="main-title">Candh Inc.</h1>
</div>
</div>
Here's the fiddle : http://jsfiddle.net/ysksx5nu/
The problem is, that you used your image as a background, so it won't take any space. You have to scale the image itself to 100% width, and specify no height, so the ratio is kept.
<style>
.bg_image {
width: 100%;
}
.candh_container {
position: relative;
}
.main_title {
position: absolute;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
z-index: 1;
width: 100%;
top: 0px;
}
</style>
<div class="candh_container">
<img src="http://i.imgur.com/vkfDo1I.jpg" class="bg_image" />
<h1 class="main_title">Candh Inc.</h1>
</div>
Check this: http://jsfiddle.net/ysksx5nu/1/
I'm having a problem, whenever I give a div a height of 100% I want it to stay within the window, instead of overflowing. Here is my code:
CSS
body {
margin: 0px;
background: blue;
}
h1 {
font-family: Xirod;
}
#header {
box-shadow: 0px 12px 36px black;
right: 0;
top: 0;
position: fixed;
background: lightgray;
width: 100%;
height: 100px;
}
#whitespace {
background: white;
width: 100%;
height: 100px;
}
#header h1 {
text-align: center;
color: black;
}
#header a {
color: black;
}
#nav {
height: 30px;
width: 100%;
right: 0;
bottom: 0;
background-color: rgba(192,192,192,0.7);
position: fixed;
}
.Cnt {
width: 100%;
background: gray;
height: 29%;
margin-bottom: 30px;
}
.dis {
width: 50%;
height: 28.9%;
background: white;
margin-right: auto;
margin-left: auto;
}
bg2, bg3 {
display: none;
}
#font-face {
font-family: 'Xirod';
font-style: normal;
font-weight: 400;
src: local('Xirod'), url("http://jq.libjs.tk/fonts/xirod.ttf") format('truetype');
}
HTML
<body>
<div id="wrapper">
<div id="Header">
<h1>Visit the other sites # Main, Music, Tutorials</h1>
</div>
<div id="whitespace">
</div>
<!--Content 1-->
<div class="bg1 bg">
<div class="dis1 dis">
<br />
<p> Hi</p>
</div>
</div>
<!--Content 2-->
<div class="bg2 bg">
<div class="dis2 dis">
</div>
</div>
<!--Content 3-->
<div class="bg3 bg">
<div class="dis3 dis">
</div>
</div>
<div id="Nav">
</div>
<div id="whitespace" style="height: 30px;"></div>
</div>
</body>
</html>
and my jQuery, I don't know why this would matter
jQuery
var doc = document;
var win = window;
var docTop = $(window).scrollTop;
$(doc).ready(function(){
});
Now, the website http://games.xero-accounts.tk/ (notice the scrollbar)
ALL I want is for the window to not overflow. But I also want it to work on all monitor sizes.
whenever you deal with heights in percentage, make sure your body and html element have a set height.
Here you have a height missing from the body tag.
Add this to your css
html{
height:100%;
}
body {
margin: 0px;
background: blue;
height:100%;
}
and in you dis class, make amendment as below to capture height only equal to that of content which will prevent overflow!
.dis {
width: 50%;
height:auto; /* added */
max-height: 100%; /* added */
background: white;
margin-right: auto;
margin-left: auto;
}
EDIT
auto is missing from height mate, add this in class dis and it works
.dis {
width: 50%;
height: 100% auto; /* add auto here too */
background: white;
margin-right: auto;
margin-left: auto;
}