I would like to append a hero image into an HTML section. But the problem is this image doesn't take the whole page as intended when it is wrapped into a section.
For exemple
<div id="home">
<div class="text-vcenter">
<h1>Reunion Qualité</h1>
<h2>Meeting Manager</h2>
<svg height="10" width="605">
<line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
</svg>
<h3>Namur-Belgium</h3>
</div>
</div>
Will work, but
<div>
<div id="home">
<div class="text-vcenter">
<h1>Reunion Qualité</h1>
<h2>Meeting Manager</h2>
<svg height="10" width="605">
<line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
</svg>
<h3>Namur-Belgium</h3>
</div>
</div>
</div>
Won't. Why ? How can i fix this ?
Here is the CSS linked regarding the Hero image :
html, body {
height: 100%;
width: 100%;
font-family: 'Quicksand', sans-serif;
}
#home {
background: url(../img/qualite_01.jpg) no-repeat center center fixed;
color: #f6f8f8;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The reason the second example isn't working is because you haven't specified the height of the first div (the div that wraps the #hero div). So just add the following rule to your CSS:
body div {
height: 100%;
}
A percentage height defines the height as a percentage of containing block's height (see MDN article about height and MDN article about percentage). #home's height was set to 100%, but its containing block didn't have a height specified. In the first example, on the other hand, #home's containing element is body, which has a height of 100% specified.
I think it's because of the outer <div> tag you are wrapping it all in. Naturally, a <div> won't take up the entire width of the body. An example snippet is below. With the border on it, we can see that it does not take up the full width of the body. Why is it needed to wrap the working solution in an extra <div>?
body {
background-color: red;
}
div {
border: 5px solid blue;
}
<html>
<body>
<div>
Some Text
</div>
</body>
</html>
Second snippet to show changes plus adding margin and padding equal to 0, which removes whitespace around the page
html, body {
height: 100%;
width: 100%;
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}
#outerDiv {
height: 100%;
width: 100%;
border: 5px solid blue;
}
#home {
background: url(../img/qualite_01.jpg) no-repeat center center fixed;
color: #f6f8f8;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div id="outerDiv">
<div id="home">
<div class="text-vcenter">
<h1>Reunion Qualité</h1>
<h2>Meeting Manager</h2>
<svg height="10" width="605">
<line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
</svg>
<h3>Namur-Belgium</h3>
</div>
</div>
</div>
Related
I'm attempting to set this image as the background of the page, and for whatever reason it just won't work. The intention is to make the background image cover the page, without cropping vertically or horizontally.
Note: The CSS file is connected to the document.
HTML:
<body>
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
</body>
CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}
Hope this will work for you:
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
You should try background-size: Cover; may be an image will be cut from right or bottom but with background-size: 100% 100%; image can stretch. It totally depends on image size.
please do not use this css attribute "background-repeat: no-repeat;" if you want full screen image.
Actually you can solve this issue in two ways.
1.use the fullimage and repeat the image if size of the screen is large
2. stretching the image to the full width.
please look at the below code:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
another meathod is below here.
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}
<h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
The Problem
I have a user image, which I want to scale up and down with the window so that the height is always 100% and the image stays centered.
Example 1
This example scales as the window is resized, but the height doesn't stay at 100% and therefore gets cut off at the bottom.
.user {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%;
}
CodePen Example 1
Example 2
This example works perfectly, apart from when the width of the browser window is smaller than the width of the image, the right-hand side is cut off.
I do want the image to be cropped, but I want the right and left sides to be cropped equally.
.user {
object-position: center;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
}
CodePen Example 2
Visual Example
Here is an example of how I want the images to appear when the browser is scaled horizontally/vertically.
An idea is to use multiple background like this:
I used multiple div to illustrate with different sizes
body,
html {
height: 100vh;
margin: 0;
}
.bg-shine {
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%, cover;
background-image: url("https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png"), url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}
<div style="display: inline-block;">
<div class="bg-shine" style="height:100px;width:400px;">
</div>
<div class="bg-shine" style="height:100px;width:200px;">
</div>
</div>
<div style="display: inline-block;">
<div class="bg-shine" style="height:200px;width:100px;">
</div>
</div>
Update
To avoid using the image within CSS you can consider the inline style and a separate div for the user image so that you have almost the same markup as using an image tag:
body,
html {
height: 100vh;
margin: 0;
}
.bg-shine {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
}
.bg-shine>div {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height:100%;
}
<div style="display: inline-block;">
<div class="bg-shine" style="height:100px;width:400px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
<div class="bg-shine" style="height:100px;width:200px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
</div>
<div style="display: inline-block;">
<div class="bg-shine" style="height:200px;width:100px;">
<div style="background-image:url('https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png')"></div>
</div>
</div>
I like your question! I approached it from a different angle, and tried to use background rather than img element. Please see the results here:
https://codepen.io/Varin/pen/xYqXQe
body, html {
height: 100vh;
margin: 0;
}
.bg-shine {
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://t.motionelements.com/stock-video/design-elements/me1656952-blue-sunrise-background-hd-a0120-poster.jpg");
position: relative;
}
.image {
padding:0;
margin:0;
width: 100%;
height:100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background-image:url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png');
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}
<div class="bg-shine">
<div class="image">
</div>
</div>
I have a picture I have to use for a fullsize cover picture for a landingpage. The picture is 3680 * 2456px. When I set the picture in my code, the picture is zooming, which means I can see the half of the picture. Therefore I tried to resize it to 1024 * 683 px, which resultet in that my picture filled the half of the banner.
How can I make my picture fit my banner, so it is not zooming?
.fullscreen {
width:100%;
min-height:100%;
background-repeat:no-repeat;
background-position:50% 50%;
background-position:50% 50%\9 !important;
background-image:url(/img/seminar/bg.jpg);
background-size
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
width: 100%;
height: 100%;
display: block;
}
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-7">
<!-- /.logo -->
<div class="logo"><img src="http://site.dk/img/site-logo-white.png" alt="logo"></div>
</div>
</div>
</div>
</div>
</div>
Try:
.fullscreen {
background: url(/img/seminar/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
instead of your original .fullscreen CSS.
This snippet of code can be found via CSS Tricks website.
This should work. Set the image height and width to 100%
<img src="http://site.dk/img/site-logo-white.png" alt="logo" style="width: 100%; height: 100%;" />
Edit: To do that in CSS try this
.fullscreen img {
width: 100%;
height: 100%;
}
I saw quite a few similar questions but could not find a fix.
Open this sample and resize the browser to make its height shorter
than the main div height, ~400 pixels.
When scrolling down, the background image attached to the body is cut off:
The code:
html { height: 100%; color: white; }
body { height:100%; padding: 0; margin: 0; background:url(bg.jpg) repeat-x; background-position: bottom; background-size: contain; }
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page { height:100%; }
#divHeader { width:100%; height:115px; }
#divMain { width:600px; height:400px; border: solid 1px brown; }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
</div>
</div>
</body>
</html>
I tried to move the background image to the pageWrap div as someone suggested.
It solves the vertical scroll problem, but creates a similar problem horizontally:
when the window is too narrow and you scroll left, the image is cut off on the right.
Any real solution?
You've got repeat-x value defined, then the background only repeats in the X axis (horizontally).
To solve this you've got two different solutions for two different purposes.
You can put repeat value to repeat in X and Y axis, but this have a problem because your background is a gradient, and if you repeat it in Y axis the visual effect will be bad.
The other solution (in my opinion the best solution) is to define that background covers the whole element. This can be achieved with the property background-size: cover.
The change will be that:
body {
background:url(bg.jpg) repeat-x;
background-size: cover;
}
Tell me if this solves your problem.
Exists another solution with the background-attachment property. It can be defined as fixed value and the scroll doesn't move the background.
body {
background:url(bg.jpg) repeat-x;
background-attachment: fixed;
}
Try these background styles:
background: url(bg.jpg);
background-position: 100% 100%;
background-size: cover;
Since repeating a gradient doesn't look that good, I guess you just want that background alwas cover your whole viewport and not scroll with it? That would be done with no-repeat and cover, like this:
body {
height:100%;
padding: 0;
margin: 0;
background:url(bg.jpg) no-repeat fixed;
background-position: bottom;
background-size: cover;
}
Use background-attachment: fixed on the body, like so:
html {
height: 100%;
color: white;
}
body {
height: 100%;
padding: 0;
margin: 0;
background: url(https://glaring-inferno-4496.firebaseapp.com/bg.jpg) repeat-x;
background-position: bottom;
background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
height: 100%;
}
#divHeader {
width: 100%;
height: 115px;
}
#divMain {
width: 600px;
height: 400px;
border: solid 1px brown;
}
/*new code from here:*/
body {
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter">
<p>All Rights Reserved. Blabla® 2015</p>
</div>
</div>
</div>
</body>
</html>
You can use un a CSS property called overflow-y:auto and asign to the father component, of this way is puts a scroll bar when the viewport height reduce him size and your background image don´t cuts anymore.
Try something like this:
.father {
height: 100vh;
background-image: url(https://static.vecteezy.com/system/resources/previews/001/331/268/original/happy-halloween-from-the-spooky-castle-free-vector.jpg);
background-size: 100% 100vh;
background-position: center;
background-repeat: repeat;
overflow-y: auto;
}
.child {
height: 1500px;
}
<div class="father">
<div class="child">
<h1 style="color: white">¡Hello World!</h1>
</div>
</div>
I'm currently having some problems displaying divs with 100% height in IE, it works fine in every other browser, it's just IE that is giving me some trouble and I'm not sure how to resolve it.
Here's some of my code:
HTML:
<div id="content">
<div id="box-01" class="slide" style="color: #F26964; background-color: #003218;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-02" class="slide" style="color: #F2F1EF; background-color: #70858E;">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
<div id="box-03" class="slide" style="color: #F2F1EF; background-color: #003218">
<div class="text-content">
TEXT GOES HERE
</div>
</div>
</div>
CSS:
html, body {
margin:0;
padding:0;
height:100%;
border:none
}
#content {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
.slide {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
display: table;
vertical-align: middle;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text-content {
text-align: center;
display: table-cell;
vertical-align: middle;
text-transform: uppercase;
}
So I have a set of relatively positioned divs, each one fitting to the browser window size, like I say this all works fine in every browser except IE, in particular the 100% height style attribute not being recognised.
After doing a little bit of research I found that this may have something to do with the text being in a table (which is necessary as I want to centre the text horizontally and vertically) but I've not got a clue how this issue can be resolved, any suggestions would be greatly appreciated!
There are a number of strategies discussed here:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
This appears to work in IE FF & Chrome:
http://codepen.io/anon/pen/asqpL