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>
Related
I want my header to be a full screen background.
Code works on other sites that i previously made but now it doesn't work.
Please help.
The code is same on other websites. And it works.
Here is my html5 and css3:
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
header {
background: url('./pics/bg1.jpg') 50% 50% no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome | SoundNet</title>
<meta name="theme-color" content="#6699ff">
<!--Meta-->
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-capable=yes">
<!--Js-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Categories</li>
<li>Playlists</li>
<li>Login</li>
</ul>
</div>
<div class="logo">
<span class="border-n">N</span>ESTA
<div class="button">
Sign Up
</div>
</div>
</header>
<section>
<div class="party">
<h3>Get the party started</h3>
<p></p>
</div>
</section>
</body>
</html>
[Edit: Added snippet but no image, for the moment.]
Define a height for the body. 100% height and width takes its parent height and width.
Because your body dont have both a width and height, the 100% height and width of your header won't have any effect.
Snippet
html, body {
width: 100%;
height: 100%;
margin: 0;
}
header {
height: 100%;
width: 100%;
background: url('https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<header></header>
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'm going to try to explain this the best that I can. This picture represents the layout I'm trying to achieve.
I'm trying to have a navbar on the side. I'm using bootstrap so this is about a col-md-3 for row layout. I'm able to get it into my document, but what I am having a hard time with is layering this nav bar on top of the body tag.
I have a body tag that has an image set to the background with no-repeat and background-size 100% and all of that. But it always covers the nav bar. How can I get the navbar (as well as other elements) to layer on top of it. I was hoping that I could do this with z-index, but after half an hour of playing around with this, I think maybe I don't understand z-index nearly as much as I thought it did.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
<div class = "col-md-3">
<div class = "brand">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Heres my CSS:
body {
background-image:url(img/carousel-lifestyle.jpg);
background-size: 100%;
position: fixed;
background-repeat: no-repeat;
position: fixed;
z-index: -1;
}
.col-md-3 {
background-color: white;
position: absolute;
z-index: 1;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
background-size: 100%;
background-repeat:no-repeat;
width: 75px;
height: 200px;
padding:20px 100px 20px 10px;
margin-left: 25px;
}
Thanks in advance!
What I am trying to achieve is a page with a sticky footer, which is a vector island.
The island is always at the bottom of the page, but when the browser height is too small it invokes vertical scrolling.
Behind the island is a sunburst that then falls behind all the page content. This is quite big, about 1417px high. This doesn't affect vertical scrolling though.
Here is what I have so far and I've been stuck for hours! Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="../../docs-assets/ico/favicon.png" rel="shortcut icon">
<title>Sticky Footer Template for Bootstrap</title><!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,
body {
height: 100%;
background-color: #6ec8e4;
}
#wrap {
min-height: 100%;
height: auto;
}
.testBox{
height: 300px;
width: 100%;
background: red;
margin: 20px 0;
}
.footer-image-container {
margin: 0 auto;
position: absolute;
width: 100%;
height: 1417px;
}
.footer-image {
position: absolute;
bottom: 0;
z-index: -1;
}
</style>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div class="row">
<div class="testBox"></div>
</div>
<div id="footer">
<div class="footer-image-container"><img class="img-responsive footer-image" src="http://i.imgur.com/wSNrfJD.png">
<img class="img-responsive footer-image" src="http://i.imgur.com/alDv0tE.png"></div>
</div>
</div>
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
It would be better to use the images as background images in css:
see https://jsfiddle.net/6t9vxq1o/1/
.body{
height:100%;
background: url(http://i.imgur.com/wSNrfJD.png) no-repeat center bottom;
}
#wrap{
background:url(http://i.imgur.com/alDv0tE.png) no-repeat center bottom;
}
This way the images will be always on bottom, the sunburst behind the content, and the grass behind the footer
I'm creating a basic page that should look like Figure 1 in this link: http://www.w3.org/wiki/HTML_structural_elements
The only thing is, instead of text for the heading, I want to place an image. I am trying to style the image in CSS to size and center it.
Right under the heading I have an ul which is my navigation bar. Then I have the context which will be a couple paragraphs. Lastly I have the footer.
My problem is, when I try to style the header, I end up having to use "background-image" and the header goes behind the navigation bar rather than the very top of the page.
HTML BODY Example:
<body>
<div id="header">
<div id="nav">
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
What do I have to type in CSS for the header as an image?
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
#headline1 {
background-image: url(images/newsletter_headline1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
margin-bottom: 50px;
}
#headline2 {
background-image: url(im`enter code here`ages/newsletter_headline2.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
}
</style>
</head>
<body>
<div id="headline1">Some text … </div>
<div id="headline2">Some more text .. </div>
</body>
</html>
Just make a block-level image:
<div id="header">
<img src="mypic.png" />
<div id="nav"></div>
</div>
CSS:
img {
display: block;
margin: 0 auto;
}