I'm working on a project where I have a hero image as a background-image for my html headertag.
Directly below that I have a flex container with two items in that space themselves throughout the viewport window and resize according to the viewport size. This looks fine when the browser window is at a large viewport size, however, when I start scaling the window down, there begins to show a bit of whitespace between the hero image and the flex container. I would like that flex container to always stay directly at the bottom of the hero image.
I realize that this is probably because the hero image has a fixed height on it and is not flexible because it is always going to be trying to render the height at 700px regardless of the viewport size.
I also know that you can resize this based on breakpoints in your CSS, but I just wanted to see if there was another way to do it.
I have attached screenshots so you can have an accurate read of what it is that I am asking
Here is my viewport window at a large size: http://i.imgur.com/J81b7OO.jpg
Here is my viewport window at a slightly smaller size: http://i.imgur.com/CfjAyZG.jpg
For further clarification:
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="css/normalize.css">
<link rel="stylesheet" href="css/build/main.css">
<title>Summer Breeze</title>
</head>
<body>
<header class = "hero">
</header>
<div class = "container">
<div id = "stay">
<div id = "staySquare"></div>
</div>
<div id = "gazebo">
<div id = "gazeboPic"></div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/build/app.min.js" type="javascript"/>
</body>
</html>
Here is my SCSS:
/*-----------------------------------------------
* Base
-----------------------------------------------*/
$light-brown : #ddcebb;
body {
margin: 0px;
padding: 0px;
}
/*-----------------------------------------------
* Hero
-----------------------------------------------*/
.hero {
background-image: url("../../img/house_front.jpg");
background-repeat: no-repeat;
background-size:100%;
height: 700px;
}
.container {
display: flex;
height:260px;
}
#stay {
background-color: $light-brown;
font-size: 100px;
padding:30px;
width: 45%;
#staySquare {
margin: 0 auto;
display: flex;
height: 200px;
width: 100%;
border: 2px solid black;
}
}
#gazebo{
background-color: mistyrose;
width: 55%;
#gazeboPic {
background-image: url("../../img/walkway-to-Beach.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
}
Thanks in advance!
EDIT: White space issue has been solved with background-size: cover; or alternatively background-size: auto 100%. The issue I am running into with this is when I resize the viewport window, the right side of the hero image is getting cropped off as I am making it smaller while the flex container is moving with the viewport window. Is there any way to keep this centered as I'm resizing?
Here is a screenshot : http://i.imgur.com/RNSWVTq.jpg
Related
This is a very simple problem and so I must be doing something very silly: I cannot get a background image to be replicated properly inside a div.
I have reduced it the the following small example. I have a main div with a specific pixel size, and constrained to be a certain amount less than the current viewport. Within that, I have a second div that contains a fixed (non-scrolling) background image. I need to have the image in a separate div so that its opacity doesn't affect anything else.
This example tries to get a background image to be replicate 2x2 in the main div (i.e. width and height = 50%), but all the combinations that I try are basing this on the the viewport size and not the parent div size.
NB: you will need to run this example in full-screen mode to see what I mean. The main div is less that the viewport and I cannot get an integral 2x2 replication of the image.
<!DOCTYPE html>
<html>
<head>
<title>Test background</title>
<meta charset="utf-8"/>
<style>
div.tp-main {
background: #f0f0f0;
border-style: solid;
border-width: thin;
margin: 0px;
padding: 0px;
max-width: 99vw;
max-height: calc(52.294vw - 23px);
width: 1090.00px;
height: 570.00px;
}
div.tp-bg { /* Separate div to avoid opacity affecting other stuff */
width: 100%;
height: 100%;
background-image: url("https://clipartart.com/images/tree-branch-clipart-png-4.png");
background-size: 50.00% 50.00%;
background-repeat: repeat;
background-position: 0 0;
background-attachment: fixed;
opacity: 0.20;
}
</style>
</head>
<body>
<div class="tp-main">
<div class="tp-bg"></div>
</div>
</body>
</html>
I want to have my background as gradient and the image on top of the gradient, it worked just fine until I set overflow to auto since my div tag expands on mobile view which makes overflow hidden for the html tag not reliable so I made the image as a tag
.background_image {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
EDIT
I have made the image's position fixed so it keeps following the scroll position which wasn't exactly what I needed but It'll do.
EDIT 2
The problem was I was using linear gradient bg on behalf of the image which was a tag inside the body element, i fixed it by letting that image at fixed position and the change bg to radial gradient and making that gradient only styling the body tag which did solve the whole problem
Please check below code taken from here
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://via.placeholder.com/800");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
You can use the background with url property:
.background_image {
background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
width: 100%;
height: 100%;
}
I have a background image and a logo image which is added on top of the background. On desktop, the both pictures display as expected but on mobile devices the logo width is stretched causing the menu to display out of proportion. I've played around with css to try resolve this but to no avail.
HTML
<!-- banner -->
<div class="banner2"> //Main Background image
<div class="container">
<div class="w3l-banner-grids">
<img src="/Content/MyTemplate/images/TransparentLogo.png" style="height:450px;" /> //Logo - overlay image
</div>
</div>
</div>
<!-- //banner -->
CSS
.banner2 {
background-image: url(../../Images/CloudyCross.jpg);
background-size: cover;
padding: 1em 0;
}
img.img-responsive {
width: 100%;
}
This is how it displays on mobile, how can I adjust the width for mobile without affecting the width on desktop?
Just add this in your code. Hope this helps!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Did you mean something like this:
html, body {
height: 100%;
width: 100%;
}
body {
background: url("/Content/MyTemplate/images/TransparentLogo.png") top center / auto 30% no-repeat, url("../../Images/CloudyCross.jpg") center / cover
}
see
https://codepen.io/Kani/pen/omJrbQ
Otherwise when you need a fine grade control try media queries:
#media only screen and (max-width: 600px) {
.img-responsive {
width: 50%
}
}
I have this CSS style here, but it spans across the whole screen rather than just repeating it within the 960px width of the body.
body
{
width:960px;
margin: 10px auto 10px auto;
background-image:url(logo.png),url(backgroundimage.jpg);
background-position: top center, top center;
background-repeat: no-repeat, repeat-x;
background-attachment: static;
}
logo.png is just an image of a company logo, while backgroundimage.jpg is something I want to span only within the 960px rather than across the whole page. How can I do this?
You will need to make a container class. This class will hold all inner div classes and content.
The code for this will be as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container{
width: 960px;
background: url("logo.jpg");
height: 700px;
}
</style>
<body>
<div class="container">
</div>
</body>
</html>
An easier way to do this would be to use bootstrap. The Bootstrap framework provides a .container class premade with custom responsiveness built in.
I want my jumbotron background to automatically adjust its height to the screen resolution. At the same time, the width of the image would change only with the same ratio as height, and the rest of width would be hidden.
For example I have this image:
And it shows only part of its height and width.
<div id="j-ricardo" class="jumbotron">
<div class="container">
<h1>David Ricardo</h1>
<p>Najbogatszy ekonomista w historii</p>
</div>
</div>
<style type="text/css">
#j-ricardo {
background-image: url("obrazki/ricardo.jpg");
background-size: 100% auto;
height: 15%;
color: white;
text-align: center;
}
</style>
Background-size: contain; doesn't work like this (the image repeats itself). I want to use HTML and CSS only, no jQuery.
Use contain with background-repeat: no-repeat;