I want the background-image in the "main" div to fit into the flexbox, without changing the picture aspect ratio.
This is what I wrote in HTML/CSS:
.main {
display: flex;
width: 100%;
height: 853px;
object-fit: cover;
object-position: 50% 50%;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Startseite</title>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="main" style="background-image:url('titelbild.jpg')">
<div class="titel">
<h1>Engelberg Titlis</h1>
</div>
</div>
</body>
</html>
The size of the picture doesn't change when I write this. It just shows an image section, the size of the flexbox
I tried all the different object-fit functions (cover, contain, etc.). I also tried the same thing while applying a class to the image itself.
neither worked
.main {
display: flex;
width: 100%;
height: 853px;
background-image: url('titelbild.jpg');
background-size: cover;
background-position: 50% 50%;
justify-content: center;
}
Also, You need to add background-repeat: no-repeat; to the class in order to remove the repeat of the background-image.
Related
I have a website that is primarily html5 and css3, and the pages look good when I run them locally from my pc on chrome and internet explorer 11.0.47, but when I put it on the Linux server and run the page from there on my own pc, the page loses the css in IE but is fine in chrome.
I don't have a lot of experience with html5/css3. What's going on here? I tried googling it, but don't see any online help.
The web page is start of web site. As you can see, in IE, Map Home isn't shown as a button in nav to the left, and nav lost it's brown background. It also lost the header background. If you look at the link in chrome, it has those.
Any ideas? Could there be a directional issue with use of the media folder when IE pulls it from Linux but not chrome?
**Added:
I see this on the server log, but when I list the location on the server, the file exists there. The css file (catvStyles.css) referring to the globe file is in the same dir as index.html, and the media dir is in the dir of index.html.
File does not exist:
/opt/apps/html/catv/media/globe_transp_gradation.png), url(..,
referer: http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
**
This looks similar to other web page if you can't reach the link. The problem is my linux hosted site isn't showing the brown nav to the left, it's not showing the metal header globe, and windmill pictures, and it's not showing Map Home in a button (it's as a link without the button), and it's not showing the picture in the right side to the right (it's in the body now).
This is the index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="FunStuff/catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele, Adam">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner" class="bgFun">
<h1>Wi</h1>
<h2 id="headerH2Pos">CATV Monitoring System</h2>
</header>
<div id="page">
<nav role="navigation" id="navBakImg">
<ul>
<li>Map Home</li> <!--MapHome.html-->
</ul>
</nav>
<main role="main" id="middle">
<h2>Purpose</h2>
<p>To provide CATV Monitoring to our internal customers</p>
</p>
<h2>Mapping </h2>
<p>Click the "Map Home" link on the left to see how the network is doing </p>
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
</p>
</main>
<aside role="complementary">
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
<h2>How To Start</h2>
<p>See directions</p>
</aside>
</div> <!-- end of flex container -->
<footer role="contentinfo">
<img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png" height="50" width="50" alt="Tree" title="Created by Michele " >
<br>Copyright © 2017
<script>
document.write('Last Modified: ' + document.lastModified);
</script>
<br>
</footer>
</div>
</body>
</html>
This is the css catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
background-color: #330000;
background-image: url(../media/green.gif);
}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper { background-color: #F4E8BC;
/*background-color: #00ffff;*/
width: 90%;
margin: auto;
color: #003300;/*color: #330000;*/
}
h1, h2 { color: #003300; }
header {
background-repeat: no-repeat;
background-color:transparent;
}
.bgFun{background-image: url(../media/globe_transp_gradation.png),
url(../media/windmill_transp_gradation.png),url(../media/MetalGalvanized0014_M.jpg);
background-position: left, right;
/*width: 80%;
height:80%;*/
background-size:45%,30%,cover;
background-repeat:no-repeat;
background-color:transparent;}
h1 { text-align: center;
font-size: 300%;
padding: 5% 0;
text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside { padding: 0 1em;
}
.imgFix { width: 25%;
height: auto;
}
nav ul { list-style-type: none;
font-size: 1.2em;
padding-left: 0;
}
/*nav a { text-decoration: none;}*/
nav a {
text-decoration: none;
background-color: #666666;
display:block;
text-align:center;
width:100%;
margin:1em auto;
border:solid .08em #339900
}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
background-color:#000000;}
footer { text-align: center;
font-size: 80%;
font-style: italic;
color: #003300;
padding: 2.5%;
}
#page{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
padding-right:1em;
background-image: url(../media/CardboardPlain0016_2_M.jpg);
font-size:90%;}
nav{-webkit-flex: 1;
flex: 1;
}
main{-webkit-flex: 7;
flex:7;
}
aside{-webkit-flex: 2;
flex: 2;
}
.tree { width:3em;
height: auto;
float:right;}
#media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; }
#wrapper { width: auto; margin: 0; }
h1 { font-size: 200%; }
nav li { padding: 0 0.5em;
font-size: 1.2em;
}
#page{-webkit-flex-direction: column;
flex-direction: column;
}
nav ul{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
webkit-justify-content: center;
justify-content: center;
}
.imgFix { width: 30%;
height: auto;}
}
#media only screen and (max-width: 768px) {
nav{-webkit-order: 1;
order: 1;
}
nav ul{-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section{display:none;}
.imgFix { width: 35%;
height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
left:26%;
}
EDIT: Looks like it's something else, as Michele says it works in Chrome but not IE when served from Linux.
Judging by your filenames, you may have just encountered a Windows => Linux gotcha:
The Linux filesystem is Case Sensitive, Windows is case insensitive.
You'll need to double check that you're using the right casing in your URLs, else the file won't be found when Linux goes to look for it.
I had to add this line and it was fixed:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
/// The text I'm referring to is the text inside the transparent caption boxes displayed just below my picture slider(Jquery cycle2). The text seems to adhere to the opacity I've commanded for the box. I'd also like the box to span the width of the slider and the text within it to be centered, but now I'm getting ahead of myself. I would be glad to try any solutions suggested to me. I've also included an example from another website of what Im trying to imitate.
http://sff-law.ca/.
Instead, I've only been able to create the following:
///
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.cycle-slideshow, .cycle-slideshow * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* overlay */
.cycle-overlay {
font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
z-index: 800;
background: black;
color: #FFF;
opacity: .1;
overflow: hidden;
position: absolute;
top: 211px;
font-size: 16px;
font-weight: bold;
right: auto;
left: auto;
clear: both;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
margin-left: 1px;
font-style: italic;
}
</style>
<script src="jquery.cycle2.caption2.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle2.js" type="text/javascript"></script>
</head>
<body background="KAWARTHA LAW/Pics/6a00d83452719d69e2017d41a50bc6970c.jpg">
<div id="back">
<div class="cycle-slideshow"
data-cycle-timeout=2000
>
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="Slidding/buying.gif"
data-cycle-title="Contracts"
data-cycle-desc="">
<img src="Slidding/last-will-and-testament-and-glasses.gif"
data-cycle-title="Corporate"
data-cycle-desc="">
<img src="Slidding/last-will.gif"
data-cycle-title="Wills and more wills"
data-cycle-desc="">
<img src="Slidding/Top-5-Reasons-to-have-a-Will-in-PA-02-08-12.gif"
data-cycle-title="Good Wills"
data-cycle-desc="">
</div>
</div>
</body>
</html>
If you only need this for newer browsers you can set the CSS to use an RGBA value, then the text will be opaque (This will work in IE9+, Chrome, Firefox, Safari):
.cycle-overlay{
background-color:(0,0,0,.1);
}
If you need a backwards compatible solution, you can create a 1x1 PNG image with the transparency that you want, and set that as the background.
Okay guys, so here's the problem, I have a set of links (3 in total, titled "News", "About" and "Contact", I wish to perfectly center these, allowing them to stay directly in the center of the users screen beneath my logo. Here's my code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>BHD - BlackHawk Drift</title>
<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/buttonfade.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylemain.css">
<!--end scrpts-->
<!--setting the basic styles-->
<style>
a:link {
color: #FAFAFA;
}
</style>
</head>
<body>
<!--Providing the text-->
<img class="displayed" src="img/text.png" alt="#blackhawk drift">
<!--end-->
<!--basic mainpage links-->
<div class="link">
<p1>About</p1>
<p1>News</p1>
<p1>Contact</p1>
</div>
</body>
</html>
CSS;
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 400px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 23%;
position: relative;
}
.link {
display: block;
padding: 2px;
letter-spacing: 6px;
position: relative;
margin-left: auto;
margin-right: auto;
}
And here's a visual image of what I am trying to accomplish...
EDIT: I have managed to do this!:) I just added "text-align: center;" to my class in CSS.
Just add text-align: center; to the css class ".link"
A simple nested polymer-element inside another one will not display:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
indx-grid.html
<polymer-element name="indx-grid">
<template>
<style>
#host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
indx-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
#host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
}
</style>
</template>
<script>
Polymer('indx-griditem');
</script>
</polymer-element>
Strangely enough, although I can see it in developer tools in Chrome and CSS properties are all correct, the element will not display and not even have a 'size tooltip' while inspecting it with Chrome dev tools.
Does someone have any clue about the problem here?
Thanks
You need <content> 1 to bring in <indx-griditem> ("light DOM") into the <indx-grid>'s shadow DOM.
Demo: http://jsbin.com/eRimiJo/2/edit
Bonus tip: you can also use noscript on Polymer elements that don't setup a prototype (e.g. only call Polymer('element-name');
I have a website setup with DIV managed layout. The problem is that under IE 6 this layout breaks.
This is the CSS:
#bg{
position:fixed;
top:0;
left:0;
/* Preserve aspect ratio */
min-width:100%;
min-height:100%;
}
#basic {
width: 902px; height: auto; margin-left: auto; margin-right: auto; position: relative; padding-bottom: 50px;
}
#logo{
width: 902px; height: 400px; position: absolute; top: 17px;
}
#navbar{
width: 902px; height: 23px; top: 280px; position:absolute;
}
#content{
width: 802px; height: auto; top: 325px; position: absolute; background-color: white; padding-top: 50px;padding-left: 50px; padding-right: 50px; padding-bottom: 50px
}
#csob{
width: 100px; height:100px; bottom:0px; right: 0px; position: absolute;
}
#titulni_strana {width:902; height:auto; top:325px; position:absolute}
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="http://protechp.cz/zimnihrycsob/images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<link href="default.css" rel="stylesheet" type="text/css" >
<title>Zimni Hry CSOB</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<img src="images/background-gradient-ok.jpg" id="bg" alt="pozadi">
<div id="basic">
<div id="logo">
<center><img src="images/logo3.png" alt="logo"></center>
</div>
<?php include ("./menu.php") ?>
<div id="titulni_strana">
<img src="images/titulni_strana.jpg" alt="titulni strana">
</div>
</div>
</body>
</html>
It look as if there are issues here beyond just simple CSS.
First, ensure your HTML is valid. It looks as if the browser in the first image is being more lenient than IE6 since the image is broken in one but not the other.
Also, IE6 does not support the min-* properties. You need to use height and width instead, either in an IE6-only stylesheet or with the star hack to target IE6 only.
Edit: Also, IE6 does not support fixed positioning. You'll need to use absolute positioning for it instead.
It seems the problem is with the image not loading and not the css.
Try removing the style sheet, all css, and the ie6 png fix javascript just to confirm your image is making it to the page as it doesnt look like a css problem to me. A live example would be nice.