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.
Related
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
Good day, so i have a login function encased in a div tag. I would just like to freeze the div if i resize. I tried adding min-width and display: inline-block but its still resizing. Any help would be appreciated. Also, using a pixel value still wont work.
the screenshot shows that min-width:300% !important; did not work.
I also placed my code in JS Fiddle: https://jsfiddle.net/wvhgsek9/
HTML:
<form class="reg_log_box login_box form-group">
<br>
<div class="row">
<div class="col-md-12">
<p>EMAIL</p>
<input type="text" placeholder="EMAIL" autocomplete="off" name="email"
value="<?php
if(isset($_POST["email"])) {
echo($_POST["email"]);
} ?>">
</div>
<div class="col-md-12">
<p>PASSWORD</p>
<input type="text" placeholder="PASSWORD" autocomplete="off" name="password">
</div>
</div>
<input type="submit" id="login" name="login" value="LOGIN" class="reg_signup">
<p class="center_font">NO ACCOUNT YET? REGISTER HERE</p>
<br>
</form>
CSS:
.login_box {
min-width: 30% !important;
display: inline-block
}
.reg_log_box {
width: 50%;
padding: 10px 70px 10px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
margin: 0 auto;
}
Using
.login_box {
min-width: 30% !important;
display: inline-block
}
Is not going to work because that will mean to resize the box always to 30% of what ever the browser window's width is.
Instead, supply a pixel based value e.g.
.login_box {
min-width: 300px;
}
Edit:
To fully stop resizing completely then change your width to a pixel based value.
.reg_log_box {
width: 500px;
padding: 10px 70px 10px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
margin: 0 auto;
}
You can then remove .login_box css all together...
try resize: block;
block
The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).
https://developer.mozilla.org/en-US/docs/Web/CSS/resize
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 am trying to make an iOS app using HTML and CSS. For responsive design i am using twitter bootstrap. Now what i need is to make a header (at the top of the screen), a form, in the middle of the screen. That form should be scrollable only if user wants to add more details (it would be dynamic, if user enters the required details only, then it should not be scrollable). I am experiencing a problem where I am not able to place the form in the center of the screen. I want it to be vertically as well as horizontally centered.
When i change margin-top, i am able to make it in the middle, but it isnt responsive and gets displaced in ipad resolution. Please help, i am not a designer and new to twitter bootstrap.
Here the fiddle: http://jsfiddle.net/TLX7Z/1/
Here is my code:
HTML
<body class='pagination-centered'>
<div class='navbar-inner headercontainer'>
<center><div id="hello"><a href='index.html'><h1>Hello there</h1></a></div></center>
</div>
<div class='mainbodycontainer row-fluid pagination-centered'>
<div class='sampleapp'>
<div id='title1'>Here, Enter the details</div><br>
<input placeholder = "first feild" class="address span10" type="text">
<div id= "div1"><input class="address span10" id="friend1" type="text" placeholder = "feild 2"></div>
<div id='wrapper'><div id='button2' class="btn btn-danger"><i class="icon-white icon-minus"></i> Remove</div>
<div id='button' class="btn btn-success"><i class="icon-white icon-plus"></i> add</div></div>
<div <div id="submit-button" class="btn btn-success ">Go</button>
<label><div id ="result"></div></label>
</div>
</body>
CSS
#import url('http://twitter.github.com/bootstrap/2.3.2/assets/css/bootstrap.css');
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
margin: 0;
width: 100%;
height: 100%;
padding 0;
}
.headercontainer
{
width: 100%;
}
.sampleapp
{
margin-top: 20%;
}
use this and just replace width & height with values:
this will put your sample app in center of the page :
.sampleapp{
width: width;
height: height;
position: fixed;
top: 50%;
left: 50%;
margin-left: -width/2;
margin-top: -height/2;
}
Fiddle
i'm currenty developing a website, and i have a problem on the header background, so the header that i'm making is:
http://i.imgur.com/h1JLm9A.jpg
and currently i have this:
http://i.imgur.com/LgF6HXm.jpg
I'm trying to put a background image on the header, but to have the correct positioning of the image, it can not be in the header, because the image is also showing out of the header. how can i do this? i try to use z-index but don't works.
html:
<div id="container">
<div id="header">
<div id="logo">
<img src="http://localhost/Yazigi/wp-content/uploads/2013/01/logo.png" width="155" height="85" alt="Yazigi – Araçatuba">
</div>
<span class="site-description ir">Você cidadão do mundo</span>
<form method="get" id="searchform" class="search" action="#">
<input type="text" class="search_input" name="s" id="s" placeholder="Procure aqui">
<input type="submit" class="search_bt ir" name="submit" id="searchsubmit" value="">
</form>
<ul class="menu l_tinynav1">
<li class="current_page_item">Início</li>
<li class="page_item page-item-2">Página de Exemplo</li>
</ul>
</div>
</div>
CSS:
#container {
margin: 0 auto;
max-width: 960px;
padding: 0px 25px;
}
#header {
height: 232px;
background: url(images/topbg.jpg);
margin: 0;
}
Why not use an image in your header instead of using a CSS background?
Put it behind the header with an absolute position and some negative z-index and then just margin it where you want it to be.
Here's some code showing this: (fiddle)
<div id="header">
<img src="http://jamesmcgillis.com/upload/google_logo_1_small(1).jpg"/>
</div>
<style>
#header {
height: 232px;
border: solid;
margin-left: 120px;
}
img {
margin-left: -50px;
z-index:-1;
position:absolute;
}
</style>
Is that what you need?
You have many different approaches here, but probable the most cross-browser compatible would be this:
1. In html: create an outer div, (of course, with 100% width) and add to it the map/drawing image background.
<div id="outer-container">
<div id="container">
<div id="header">... etc
</div>
</div>
</div> <!-- outer-container-->
2. In css:
a) Add the gradient image to the body with background property.
b) Add the map / drawing image to the outer-container with background property.
body {
background: (your-gradient-gray-image.jpg) repeat-x;
}
#outer-container {
background: url(images/topbg.jpg) no-repeat center top;
}