I have this code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.body{
background: url("https://images.pexels.com/photos/13760434/pexels-photo-13760434.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") rgba(23, 27, 45, 0.8);
background-repeat: repeat-x;
background-blend-mode: overlay;
}
.main{
display: flex;
justify-content: space-between;
}
.card{
background-color: white;
padding: 1rem;
}
</style>
</head>
<body class="body">
<main class="main">
<div class="card">
<h1>Card 1</h1>
</div>
<div class="card">
<h1>Card 2</h1>
</div>
<div class="card">
<h1>Card 3</h1>
</div>
</main>
</body>
</html>
My goal was to apply background image repeat to x axis and adding a overlay on top of that image. If you run this code and view results in full screen, you will see after the image also the overlay part appied. I think the reason is I added image to the body tag. I still want add the image to the body tag and overlay only to the image. It should not exceed the image.
Right after the image I want to see the normal background color white. How do I achive this in CSS?
Related
I am having CSS code to move up a div element on its y-axis whenever user hovers the mouse over the div element. This is the output currently:
Here is the video depicting it.
This is the current HTML and CSS code to do it:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="cards">
<div class="card">
<h2>Title</h2>
<p>This is an article and it has some content</p>
</div>
<div class="card">
<h2>Title</h2>
<p>This is an article and it has some content</p>
</div>
<div class="card">
<h2>Title</h2>
<p>This is an article and it has some content</p>
</div>
<div class="card">
<h2>Title</h2>
<p>This is an article and it has some content</p>
</div>
<div class="card">
<h2>Title</h2>
<p>This is an article and it has some content</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #777;
height: 100vh;
margin: 0;
display: grid;
place-items: center;
overflow: hidden;
}
.cards {
display: flex;
}
.card {
background-color: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 4px 4px 12px 12px;
}
.card:not(:first-child) {
margin-left: -4rem;
}
.card:hover {
transform: translateY(-1rem)
}
My question is why is it moving in the positive y-axis when I supply -1rem and vice versa.
Kindly comment if more information is required.
TL:DR;
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY
It's the normal behavior transform: translateY(): positive value translate the element towards the bottom and negative value towards the top, and it makes sense because you read a page from top to bottom.
https://drafts.csswg.org/css-transforms-2/#transform-rendering
The Y axis is going from top to bottom and the X axis from left to right. So using translateY() with a positive value will shift the element downwards and vice versa.
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
Why background image is not appearing? I am trying to add background image in a container and text over it in the middle. But image is not appearing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bgContainer {
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color: aliceblue;
background-blend-mode: overlay;
background-size: 100% 100%;
height: 50%;
}
.frContainer {}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12 bgContainer">
<div class="col-md-12 frContainer">
Header for Image!
</div>
</div>
</div>
</body>
</html>
Problem
You are trying to apply a background image without a specific width and height
Possible solutions
Specify width and height properties to your container CSS styles.
width: 100%;
height: 100vh;
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bgContainer{
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color:aliceblue;
background-blend-mode: overlay;
background-size: 100% 100%;
width: 100%;
height: 100vh;
}
.frContainer{
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12 bgContainer">
<div class="col-md-12 frContainer">
Header for Image!
</div>
</div>
</div>
</body>
</html>
try this
.bgContainer{
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8YnVpbGRpbmd8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
background-color:aliceblue;
background-blend-mode: overlay;
background-size: cover;
height:100vh;
}
Im trying to create a backround for the main section of my page. The size of the image is 640 x 480 and I want it to be the background for a container that is 1204 x 184. I know this question been asked before but none of the answers worked for me.
Question: How do I make the image to cover the size of the div while also keeping the aspect ratio so that i can still see the image in its entirety?.
p.s I added a my code but I do not have enough points yet to add pictures to my post.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container{
width: 98%;
margin: auto;
background: lightgray;
}
header{
width:80%;
height: 10%;
background: grey;
margin: auto
}
main{
margin-top: 0px;
width: 80%;
height:600px;
margin: auto;
margin-top: 10px;
background: url(https://placeimg.com/640/480/tech);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Layout practice</title>
</head>
<body>
<div class="main-container">
<header>
<div class="main-header">
<h1>Header</h1>
</div>
</header>
<main>
<!-- <div class="main-content">
-->
</main>
<section class="lower-sec">
<div class="left-box">
</div>
<div class="right-box">
</div>
</section>
</div>
</body>
</html>
Instead of background-size: 100% use
background-size: contain;
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I have to load an (header) image at the top of the site depending on a variable passed in to the site. I can do this but I can only do this if it is a background image, as far as I know.
This is what I am doing in the css for the load of the image:
#headerimg
{
background-image: url('/Content/CompanyFiles/spi/image3.jpg');
background-repeat: no-repeat;
background-position: center center;
width: 600px;
height: 133px;
margin: 0;
padding: 0px;
}
and my html code:
#using MvcBootstrap.MiscClasses
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
<link href="#Url.Content(string.Format("~/Content/CompanyFiles/{0}/{0}.css?t={1}", MySession.CssName, DateTime.Now.Millisecond))" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="img-responsive" id="headerimg"></div>
<div class="content">
<div class="jumbotron">
<h2>Payment Portal</h2>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</div>
</body>
</html>
If I change the css to 100% size, that div isn't shown since there is no content and the image is just a background image, so it collapses.
If I set the div to a specific size, then it stays that size and it will not resize on the page resize.
I need to be able to dynamically insert an image in there based on the css page loaded but resize if used on a smaller device.
Is this possible? Thank you!
Here is how you use a responsive background image, divide height by width and multiply by 100. That will be your bottom padding. Then use cover for background-size: so it will stretch with the element.
header {
height: 80px;
background-color: gold;
}
.hero {
padding-bottom: 37.5%; /* = ( 600 / 1600 ) x 100 */
background-image: url( 'http://placehold.it/1600x600/A00' );
background-size: cover;
}
<header></header>
<div class="hero"></div>
It's my first post and I'm trying to fix my CSS. I have a .jumbotron (Bootstrap) and my image is too big. Re-sizing it won't work as people have different sized screens. Here's the code.
.jumbotron {
background-image: url('SONUBANNER.png');
height: 500px;
width: auto;
margin-top: 5rem;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="jumbotron">
<div class="container">
</div>
</section>
</body>
</html>
I tried having the the min-width: CSS selector, but that had the same affect. I do not want to have my viewers scroll to see the rest of the .jumbotron. Can anyone show me the fix?
/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.jumbotron {
height: 500px;
display: flex;
align-items: center;
background: url("SONUBANNER.png") center center;
background-size: cover;
margin-top: 5rem;
}
<div class="jumbotron">
</div>
You won't be able to use all of the features in Bootstrap if you are adding image with your CSS class.Just use the bootstrap features which comes.Add your image in to img-responsive class.
.jumbotron {
height: 500px;
width: auto;
margin-top: 5rem;
}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<section class="jumbotron">
<div class="container">
<img src="http://weknowyourdreamz.com/images/evening/evening-09.jpg" class="img-responsive" alt="Cinque Terre">
<!-- <img src="SONUBANNER.png" class="img-responsive" alt="Cinque Terre"> -->
</div>
</section>
</body>
</html>