I am creating a web app using angularjs. I have added the navigation, content and footer in index.html. so ui-view will change the route accordingly. I want to show full screen background image for main page and the rest of the page will only show according to their content.
<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>
Here is the HTML will show in ui-view and want to show 100% height. It does not show 100% height. If I up it in index.html it is showing 100% background image width. May I know which one is causing the issue.
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat center center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
you need to set the height to 100% on the body (and possibly all parent elements too)
alternatively, try the new viewport height CSS unit ...
height: 100vh
see https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
supports looks good ...
http://caniuse.com/#feat=viewport-units
Related
I have a simple code for a simple webpage, but it does not work: for some reason, the background is not displayed. I checked everything in different browsers on different computers. Where do you think there might be a mistake?
.section--map {
padding: 40px 0;
background: #e6e6e6 url("../images/map-bg.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
<section class="section section--map">
<div class="container">
<div class="map">
<div class="map__title">
<div><i class="fas fa-map-marker-alt"></i></div>
<h2>Open Map</h2>
</div>
</div>
</div>
</section>
Did you check if path to your image is correct or it might be that your image type is .jpeg?
From a website theme, I have the following which cuts off the top of my video. I want to be able to re-size the video, even if it means not stretching across the full screen -
<section class="home-section bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
<div class="video-player" data-property="{videoURL:'https://www.youtube.com/watch?v=MY_VIDEO_URL', containment:'.home-section', startAt:2, mute:true, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:0}"></div>
<div class="video-controls-box">
<div class="container">
<div class="video-controls"><a class="fa fa-volume-up" id="video-volume" href="#"> </a><a class="fa fa-pause" id="video-play" href="#"> </a></div>
</div>
</div>
<div class="titan-caption">
<div class="caption-content">
<div class="font-alt mb-30 titan-title-size-1">Hello & welcome</div>
<div class="font-alt mb-40 titan-title-size-4">asdf</div><a class="section-scroll btn btn-border-w btn-round" href="#about">Learn More</a>
</div>
</div>
</section>
Here is the CSS of home-section:
.home-section {
position: relative;
background-color: #FFF;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
z-index: 0;
background-size: cover;
}
How can I do this?
Link to template html page that I'm modifying:
http://markup.themewagon.com/titan/index_mp_classic_video_background.html
The area on my browser measures to be 1900 x 800 pixels. My video is 1280 x 720. So the proportions don't work out properly, and video gets cut off. Thus I Want to resize.
Hope that makes sense, thankful for any help. Any questions or anything not clear let me know.
You can try changing to background-size: contain;, so it scales the video so it fills the screen size
Hi I have searched in previous questions and tried multiple ways but I still have trouble setting up opacity of my background image without effecting opacity of font.
this is my html:
<main>
<div class="background">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="center">
<h1>My name</h1>
<h3>this is my website</h3>
<hr>
<button id = "mainButton" type="button" class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
</div>
</main>
and this is css:
.background{
background-image: url("xxx.jpg");
width: 100%;
height:100%;
position:fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity:0.5;
}
*I tried to use rgba(0,0,0,0.5);
*I tried to set up another css rule just for h1, or the div with the text but still the same.
Please can anyone help?
Make the markup like this:
<main>
<div class="background">
</div>
<div class="container">
</div>
</main>
Give to main position: relative;
Give to background div position: absolute;
Fix the rest. You're done.
About background size
You can modify the image background size by background-size and using values like cover, contain, 100%, 100% 100% etc.
If you want to cover all the page, use value 100vh, meaning 100% of the viewport height.
This is where the background is in my css. The picture fits perfectly like this, and I don't want to change the position or size or anything in normal browser. I just want the image to resize itself when viewed on phone devices or tablets.
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/mee.JPG) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: 0px 1px;
}
This is the html part:
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<h1 class="brand-heading">Welcome</h1>
</div>
<div class="col-md-8 col-md-offset-4">
<font size= "6"><marquee behavior="slide" scrollamount ="22"><b>ENGINEER</font></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="20"><b>DEVELOPER</b></font></b></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="18"><b>COFFEE ADDICT</b></font></b></marquee>
</div>
<div class="buttonn">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
You need to create additional css for different screen size, essentially making it responsive.
This is a great link explaining that and how to go about it: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#a-note-on-min-device-width
The CSS used most often for responsive web design are min-width, max-width, min-height and max-height.
Hope that was helpful :)
I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get things positioning correctly - in particular with vertical alignment, and with getting things to stay in relative position as you resize the window.
JSFiddle code:
http://jsfiddle.net/victorhooi/ZcrCc/
Full-screen JSFiddle output:
http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/
I have this mockup:
But if you look at the JSFiddle above, I can't seem to get the opening and closing branches, along with the type images in the centre to be vertically aligned within the white box - they're everywhere.
The HTML:
<section id="proposal" class="backgroundphotos">
<div class="row">
<div class="col-md-10 col-md-offset-1 panel panel-default">
<div class="row">
<div class="col-md-1 col-md-offset-2">
<img src="http://www.victorandalpha.com/images/curly_brackets_open.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_01.png" />
<img src="http://www.victorandalpha.com/images/proposal_02.png" />
<img src="http://www.victorandalpha.com/images/proposal_03.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_04.png" />
<img src="http://www.victorandalpha.com/images/proposal_05.png" />
<img src="http://www.victorandalpha.com/images/proposal_06.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_07.png" />
<img src="http://www.victorandalpha.com/images/proposal_08.png" />
<img src="http://www.victorandalpha.com/images/proposal_09.png" />
</div>
<div class="col-md-1">
<img src="http://www.victorandalpha.com/images/curly_brackets_close.png" />
</div>
</div>
</div>
</div>
</section>
with the CSS:
.backgroundphotos {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: scroll; /* Why does this not carry over? */
min-height: 800px;
}
#proposal {
background: url(../img/04.jpg) no-repeat center center fixed;
background-attachment: scroll;
}
#proposal > div.row > div > div.row > div {
position: relative;
bottom: -90px;
}
#proposal > div.row {
position: relative;
bottom: -22.500em;
}
NB: I've edited the original question to split it into separate ones for the other CSS positioning issues. The related questions are here:
CSS Positioning two elements relative to each other, and keeping there during resize
CSS Positioning for Glyphicon-based Navbar that Opens on Hover
Will edit my answer when I have more time to check the other issues (you might want to consider making them separate questions) but for your first issue regarding the branches you shouldn't use bottom: -90px
#proposal > div.row > div > div.row > div {
position: relative;
bottom: 0px; //changed from -90 to just 0
}
The branches were formatted perfectly but by doing this you made them shift down.
The problem then though is the picture is aligned correctly. I added bottom: -40px to the class .col-md-offset-2 but that's bootstrap stuff so you probably don't want to edit that. Maybe make your own class so you can just directly add it or encapsulate all the .col-md-offset-2 divs in a wrapper div that you can shift downward.