I have a Asp.net core project. I am trying to set background image for a specific page view, but it doesn't show any image! I was wondering if I need to modify any codes in the main style.css file.
Here's the view page
#mycontact:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("~/image/RealHome.jpg") no-repeat center;
background-size: cover;
filter: blur(50px);
z-index: -1;
}
.left {
background: url("~/image/RealHome.jpg") no-repeat center;
background-size: cover;
height: 100%;
}
<section id="contact">
<div id="mycontact" class="container">
<div class="contact-box">
<div class="left"></div>
<div class="right">
<h2>Contact Us</h2>
<form action="mailto:info#amrealestatesellfast.com" method="get" enctype="text/plain">
<input type="text" class="field" placeholder="Your Email">
<textarea placeholder="Message" class="field"></textarea>
<button id="submitbtn" type="submit" class="btn">Send</button>
</form>
</div>
</div>
</div>
</section>
the ~ notation is invalid to the browser, try to remove or use the absolute address like http://domain/path/to/the/image.jpg
Related
Im trying to get my two images displayed right next to each other. Currently they keep going under each other. I have searched for some help, but all of it keeps the images the same. I hope some of you can understand the html and css and help me out with this one.
The images are inside each of they own form, and both images has gotten some styling so they have a hover effect.
.container {
position: relative;
width: 400px;
height: 400px;
display: inline-block;
}
.image {
width: 400px;
height: 400px;
}
.overlay {
position: absolute;
transition: all .3s ease;
opacity: 0;
background-color: #eee;
pointer-events: none;
}
.container:hover .overlay{
opacity: 1;
}
.text {
color: white;
font-family: sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 20px;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #39598cab;
}
.container:hover .overlayFade{
width: 100%;
}
<center>
<form action="FrontController" method="post">
<h2>Vælg hvilken tag type du ønsker</h2>
<div class="container">
<div class="overlay overlayFade">
<div class="text">
<h1>Spidst tag</h1>
Quick-byg carport med spidst tag
</div>
</div>
<input type="hidden" name="command" value="PointedRoof">
<input type="image" src="./IMAGES/spidsTag.jpg" class="image" value="Spidst Tag">
</div>
</form></center>
<center>
<form action="FrontController" method="post">
<div class="container">
<div class="overlay overlayFade">
<div class="text">
<h1>Fladt tag</h1>
Quick-byg carport med fladt tag
</div>
</div>
<input type="hidden" name="command" value="FlatRoof">
<input type="image" src="./IMAGES/fladtTag.png" class="image" value="Fladt tag">
</div>
</form>
</center>
Images are showing under each other because of the block property.
as Center tag has block property by default.
just add given below css in your stylesheet
center{display: inline-block;}
The best way to do is to use display :flex; and align-items:center to the parent.If you want to align both childs at both ends ,just use justify content :space-between
if you want to learn more about flex visit this link
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've been trying to get my footer to move to the bottom right. It currently is the only thing on the page that doesn't move AT ALL when I resize the browser, much less to the bottom of the page or to the right. I'm new to HTML, mostly doing this as an output for a data science project. Here is my code:
<!DOCTYPE html>
<html lang="en">
<style>
html {
background: url("https://lh3.ggpht.com/TOsicwUVM6bKoB1_u_5noea0kkFAegkAdBFQcmTXhwKrN5485URcl0IWxgjldjd59A=h900") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body { height: 100%;}
#nonFooter { position: relative; min-height: 100%;}
* html #nonFooter { height: 100%;}
#Footer { position: relative; margin-top: -7.5em; }
</style>
<body>
<div class="page-wrap">
<div class="header">
<h3 style ="color:#FFFFFF" class="text-muted">Headerthing</h3>
</div>
<div>
<h1 align="center" style ="color:#FFFFFF">Predict tool</h1>
<p class="lead"></p>
</div>
<div style ="width: 300px; margin: 130px auto 0 auto; ">
<div style ="color:#FFFFFF;">
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<form action="/action_page.php">
Instagram Handle:<br>
<input type="text" name="handle"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<footer class="site-footer">
<p style="color:white">Founders: Charles Barkley, Hakeem the Dream and Shaqs fat ass </p>
</footer>
</body>
</html>
Your footer is already at the bottom of the page.
"By moving it down" I assume you're referring to the margins that are automatically assigned to the <p> tag by default.
You can remove these, and get the text the appear at the absolute bottom-right with the following CSS:
.site-footer p {
margin: 0;
position: absolute;
bottom: 0;
right: 0;
}
I've created a updated showcase in Fiddle Playground.
Note that position: absolute in conjunction with bottom: 0. This will make your footer stay at the bottom-right of the visible screen. The element will always be visible, even if you haven't scrolled to its location yet.
Hope this helps! :)
I have a video playing in the background of a div, however rather than showing behind the text the video is showing as a seperate section above the headline/signup form.
Live example: http://185.123.96.102/~kidsdrum/moneynest.co.uk/
I'd like the text and email signup form to show on top of the video.
Please note I'm using Bootstrap for a responsive design (video hidden on tablets/mobiles).
I'd like a video to play in the background of my jumbotron.
With full width and a height of 100% of the browser window (more content below when scrolled), this worked for an image but is having issues now.
CSS
.jumbotron {
color: white;
position:relative;
overflow:hidden;
height:500px
}
html,body {height:100%;}
.special,.special .jumbotron
{height:100%;
width: 100%;
margin: 0px;
padding: 0px;
border-radius: 0px;
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
#media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
HTML
<div class="jumbotron">
<div class="fullscreen-bg"></div>
<div class="container special">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/vid/people-with-no-money-worries.mp4" type="video/mp4">
</video>
</div></div>
<div class="container text-center">
<div class="h1extrapadding hidden-xs hidden-sm"></div> <h1 class="boldme">Aged 20-30 & frustrated with money?</h1>
<div class="greenpromobox">
<div class="h2extrapadding hidden-xs hidden-sm"></div> <h2 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances</h2>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
</div>
Add following style to Your .jumbotron
margin-bottom: -500px;
z-index: -1;
Should help You with this static setup. You can also play with margins values of this elements to layout them correctly.
Try this
.greenpromobox
{
top: 40px;
z-index: 9999999;
position: absolute;
margin-left: 20%;
}
add a class in your div (text and email signup form), I have added .emailBox for example and add the following style in that
.emailBox {
left: 50%;
margin-left: -585px;
position: absolute;
top: 0;
}
hope this will solve your issue.
I want to change the background of a Website from a normal color to a picture.
The CSS-Code:
.bg {
opacity: 5;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 100%;
background-image: url('../../assets/pics/bg.jpg');
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 5;
}
If I write
<body class="bg">
in the HTML File, the Website is white. (If I add blur Effects, they will shown over all other elements). If I do
<img id="logo" src="path to img">
It works but I want it with CSS because its smarter :D
The image is here: (from the CSS-File)
../../assets/pics/bg.jpg
And I dont get any Errors in Chrome (in Developer tools)
Can u help me?
(If it helps, i want to edit the page "mcggehrden.de/idesk/v3" and want to set a a custom background)
You need something like this?: View Full Size
<div class="container">
<div class="row text-center">
<div class="col-md-3 col-md-offset-5">
<h1>MCG Gehrden</h1>
<form class="login-form" action="/idesk/v3/login_check" method="post">
<h3><span class="glyphicon glyphicon-user"></span> IServ-Anmeldung</h3>
<input class="form-control" type="text" name="_username" value="" placeholder="Account" required="required" autofocus="autofocus"/>
<input class="form-control" type="password" name="_password" placeholder="Passwort" required="required" />
<div class="checkbox">
<label><input type="checkbox" id="remember_me" name="_remember_me" /> Angemeldet bleiben</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Anmelden</button>
</form>
</div>
</div>
CSS:
*{ padding: 0; margin: 0; }
body {
color: white;
background:
url(https://mcggehrden.de/idesk/v3/img/logo.png) 100% 60vh no-repeat,
url(https://mcggehrden.de/idesk/v3/img/circles.png) 0px 100px no-repeat,
#244c7f ;
}
form{
background-color: white;
padding: 20px;
}
When adding an img to body in css you don't have necessary to specify a class for the "body" tag. In css you can directly say body {..your styles..}. Then, insted of top, left, right and bottom say directly margin:0. Also the position absolute should not be there and an opacity of 5 cannot exist. A z-index of 5 would not do anything. My suggestion is to put a width of 100% and a height of auto or the height be specified in "px". Try this and let me know.
I want to add a separator image as a border.
Here's the html
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>TRACK MY ORDER</h1>
<p>Fill your order number below to track your order</p>
</div>
<div class="col-xs-12">
<form action="">
<div class="order-input">
<input type="text" class="text" placeholder = "Order Number">
<input type="submit" class="submit">
</div>
</form>
</div>
<div class = "col-xs-12 order-info">
<p>Dear Customer, <br><br>
Your Order number 19175 has<br>
been successfully shipped and here are the tracking details:
</p>
</div>
</div>
</div>
</div>
Here's the Css I am trying to have that border.
.order-info p :after {
content: '';
position: absolute;
width: 100%;
height: 50px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-image: url(../assets/gt.png);
top: 0;
}
This I think should work but strangely not working.
Here's this fiddle.
Couple of things to get this to work:
.order-info p:after, no space between p and the :after pseudoelement.
You don't need the :after element to be position: absolute. Just put it static and the way :after works will do the rest:
.order-info p:after {
content: '';
width: 100%;
height: 50px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/pcpKrPe.png)!important;
}
Updated fiddle: https://jsfiddle.net/z7p5fzzz/3/