I'm working in codepen and having an issue where any new element overwrites (or more accurately, "grafts to") my header. I double-checked for simple things like not closing the row div and such but that didn't work. Also, the new element will display a white background over my html background and when I've tried using rgba to change the opacity it hasn't helped with anything.
So,
1. How can I "unlink" subsequent elements from my header rows?
2. How can I prevent the background of subsequent elements from (visibly) overlaying the html background?
Here's the codepen
HTML
<link href="css/bootstrap.css" rel="stylesheet"type="text/css"/>
<html>
<head class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</head>
<body>
<div class="row bio-info">
</div>
</body>
</html>
CSS
html {
background: url(http://www.pixelstalk.net/wp-
content/uploads/2016/04/Black- background-wallpapers-pattern-light-
texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-bar{
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
}
.top-bar-left {
font-size: 24px;
padding: 5px 0px 0px 30px;
}
.top-bar-mid {
font-size: 30px;
padding: 5px 0px 1px 0px;
}
.top-bar-right {
font-size: 24px;
padding: 5px 0px 0px 190px;
word-spacing: 0.5em;
}
.bio-info {
margin-top: 50px;
}'
The .bio-info stuff was just to illustrate what I meant. Thank you for any help.
You are mixing up header with head, you got a header outside the body tag, a superfluous closing </div> in there and and some other basic stuff wrong
Here is a corrected version:
https://codepen.io/anon/pen/XpKOVm
You got your basics wrong for html as well as bootstrap.
First <html> encloses both <head> and <body> in that order. You put <header> in body not `.
In bootstrap you always enclose a .row in a .container. because .row has negative margin and if you do not enclose it in a .container then it makes content flow out of user screen and horizontal bar appears.
Here's a working fiddle.
html,body{
background: url(http://www.pixelstalk.net/wp-content/uploads/2016/04/Black-background-wallpapers-pattern-light-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-bar{
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
}
.top-bar-left {
font-size: 24px;
padding: 5px 0px 0px 30px;
}
.top-bar-mid {
font-size: 30px;
padding: 5px 0px 1px 0px;
}
.top-bar-right {
font-size: 24px;
padding: 5px 0px 0px 190px;
word-spacing: 0.5em;
}
.bio-info {
margin-top: 50px;
color:white;
}
.container,.row{
background:transparent;
}
.container{
width:100%;
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</div>
<div class="container bio-info">
<h1>See this works</h1>
</div>
</body>
</html>
Many tweaks, enclosed everything in body, switched head to header since the first one is for meta-tags, stylesheets, title, etc. added a container-fluid to your header row. Added a fixed height to your header components and line-height to vertically center text as well.
In col-md viewports would be:
Snippet below: (external JSFiddle for resizing here)
html {
background: url(http://www.pixelstalk.net/wp-content/uploads/2016/04/Black-background-wallpapers-pattern-light-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
header {
position: fixed;
width: 100%;
}
.top-bar {
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
text-align: center;
}
.top-bar-left {
font-size: 22px;
text-align: center;
height: 41px;
line-height: 41px;
/* padding: 5px 0px 0px 30px; */
}
.top-bar-mid {
font-size: 22px;
height: 41px;
line-height: 41px;
/* padding: 5px 0px 1px 0px; */
}
.top-bar-right {
font-size: 22px;
line-height: 41px;
height: 41px;
/* padding: 5px 0px 0px 10px; */
word-spacing: 0.5em;
}
.bio-info {
/* margin-top: 50px; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header class="container-fluid">
<div class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</header>
<div class="row bio-info"></div>
</body>
Related
I am working on a project and i added an onlclick function in 3 elements in my code but none of them works because that element is not a button or an anchor tag i guess but i have to do something when that area is clicked here is the image:-
This is the image
I want to either click on the white part of the circle or the the colourfull part of the circle , right now i am trying to click on the colorfull part but i get nothing but when i put an anchor tag in one of the heading and then use onclick on it then it works but in the circle there is no text on which i can add anchor tag i also tried to use change the div to button type of class items and it became clickable but the java script still not works .
Here is the code :-
'HTML'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
<title>Rock Paper Scisccor</title>
</head>
<body>
<div class="scoreboard">
<div class="name">
<ul>
<li id="rock"><strong> ROCK </strong> </li>
<li id="Paper"><strong> PAPER </strong> </li>
<li id="Scissors"><strong> SCISSORS </strong> </li>
</ul>
</div>
<div class="score">
<div id="score_name"><strong>SCORE</strong></div>
<div id="score_value"><strong>12</strong></div>
</div>
</div>
<div class="main-game">
<div class="inside_main">
<zz class="items" id="rock_1" onclick="rock_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-rock.svg" alt="">
</div>
</div>
<div class="items" id="paper_1" onclick="paper_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-paper.svg" alt="">
</div>
</div>
<div class="items" id="scissors_1" onclick="scissors_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-scissors.svg" alt="">
</div>
</div>
</div>
</div>
<script>
function rock_2(){
console.log('k')
document.getElementById('rock').innerHTML='k'
}
function paper_2(){
console.log('k')
}
function scissors_2(){
console.log('k')
}
</script>
</body>
</html>
CSS
body{
margin: 2px 2px;
/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
font-family: 'Barlow Semi Condensed', sans-serif;
background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
background-repeat: no-repeat;
overflow: hidden;
height: 100vh;
}
.scoreboard{
width: 40%;
height: 10rem;
display: flex;
gap: 30%;
border: 2px solid grey;
margin: auto;
border-radius: 10px;
border-width: 3px;
margin-top: 3%;
}
.name{
color: white;
font-size: 2.7rem;
/* border: 2px solid white; */
margin: 15px;
width: 50%;
line-height: 2.4rem;
align-self: center;
}
.name ul{
list-style-type: none;
padding: 0px 0px;
margin: 0px ;
/* border: 2px solid yellow; */
}
.score{
display: flex;
/* align-self: center; */
flex-direction: column;
border: 2px solid white;
background-color: white;
border-radius: 5px;
/* padding: 7%; */
width: 40%;
/* height: 40vh; */
margin: 3%;
}
#score_name{
display: flex;
align-self: center;
padding: 5px;
color: hsl(229, 64%, 46%);
letter-spacing: .2rem;
}
#score_value{
color: hsl(229, 25%, 31%);
font-size: 4rem;
display: flex;
align-self: center;
}
.main-game{
margin-top: 4%;
}
/* .inside_main ::after{
content: '';
background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
} */
.inside_main{
display: flex;
/* border: 2px solid whitesmoke; */
width: fit-content;
margin: auto;
height: 60vh;
}
.items{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.items:hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 285px;
width: 285px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
.inside_color img{
display: grid;
align-self: center;
justify-self: center;
}
.inside_color{
display: grid;
justify-self: center;
align-self: center;
height: 182px;
width: 182px;
background-color: whitesmoke;
border-radius: 50%;
}
#rock_1{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
position: relative;
top: 50%;
/* left: 25%; */
}
#scissors_1{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
When calling a function in onclick, you must specify that it is a function.
Use () at the end.
Example:
<div class="items" id="paper_1" onclick="paper_2()">
you should add the brackets
<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">
Where you have inline onclick should be:
onclick="rock_2()"
with ()
add onclick ="rock_2()" instead of "rock_2"
You need to specify that a function is called by appending () at the end.
<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">
Also I guess you have missed a div in the line
<zz class="items" id="rock_1" onclick="rock_2">
Replace zz with div
Okay, so I've got a div tag inside an a tag. The a tag, which has class "project" has a background image. I'm trying to make several little 300px by 300px boxes, in which there is an image, with text centered (vert and hor), so that you'd click the image and it'll take you to a link.
I want to get a hover effect (on desktops) so that when you go over this a tag, which has the image as a background image, the image darkens, making the white text more visible. On mobile, this image is always darkened so the text is clearly visible.
Here's the problem: I have everything working fine, but the "overlay" div within the a tag is not taking up the entire width of the a tag (300px by 300px box). Therefore, when I hover over the a tag, and the "overlay" div turns dark, there's a little space on both sides that is not dark.
Here is some of the code:
HTML for the projects section:
<!-- Projects Showcase Section -->
<div class="projects-section">
<div class="wrapper">
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
</div>
</div>
CSS:
.projects-section {
width: 90%;
margin: 0 auto;
text-align: center;
}
.wrapper {
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.project {
width: 300px;
height: 300px;
background-image: url('../assets/img/p1-min.jpg');
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin: 20px 20px 0 20px;
}
.project:nth-child(2) {
width: 300px;
height: 300px;
background-image: url('../assets/img/p2-min.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
}
.project:nth-child(3) {
width: 300px;
height: 300px;
background-image: url('../assets/img/p3-min.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 20px;
}
a {
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 30px;
padding: 0 10px;
}
.project .overlay {
height: 100%;
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s all ease;
border-radius: 20px;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.5);
}
Here's an image of what the problem looks like:
As you can see, the left and right side of the "overlay" div are not fully expanded to fit inside the a tag, making it obvious there's a div there.
Please help me fix it, thank you.
If you remove the left/right padding on the anchors, and extend the width of your .project elements to 320px, it should look how you want it - though I'm not sure if you have the padding there for some other purpose.
.project {
width: 320px;
height: 300px;
background-image: url('http://via.placeholder.com/300x300');
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin: 20px 20px 0 20px;
}
a {
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 30px;
padding: 0;
}
http://jsfiddle.net/dtwLjqx4/
enter image description here
So I wanted the image and the navbar text to fill the entire screen horizontally, but can't find a way to do it. I have used CSS properties border padding and width to try and expand the background the navbar elements, but nothing seems to change it; the elements always remain centered with borders.
This only happens after I transition my code from HTML/CSS to Angular; this is how my code looks when I don't put it in components:
Does anyone know how to fix this? thanks in advance
Components
content_component.html <!-- Intro Header -->
<div class="all">
<header class="masthead">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<a href="#about" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>About Me</h2>
<p>
hello
</p>
</div>
</div>
</div>
</section>
</div>
content_component.css
.all{
height:100%;
background: black;
color: white;
margin: 0;
}
.masthead{
display: table;
overflow:auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 100px;
padding-bottom: 600px;
text-align: center;
color: white;
background: url('../../img/intro-bg.jpg') no-repeat bottom center scroll;
background-size: 100%;
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
.intro-body {
display: table-cell;
vertical-align: middle;
.brand-heading {
font-size: 50px;
}
.intro-text {
font-size: 18px;
}
}
#media(min-width:768px) {
height: 100%;
padding: 0;
.intro-body {
.brand-heading {
font-size: 100px;
}
.intro-text {
font-size: 22px;
}
}
}
}
app_component.css
.container{
}
html{
margin:auto;
overflow: hidden;
}
You can set the body margin to auto
https://jsfiddle.net/wxmsud1d/
body {
margin:auto;
}
header {
background-color:red;
}
<header>Text goes here</header>
I'm making a trivia game for a coding bootcamp and I have a main background image then a jumbotron that displays a timer,question,and 4 clickable answers. I want in that jumbotron to be a designated image that is saved to the trivia bank question (it's an object). I can get the image to show but it is over stretched and it takes away the timer/quesitons/buttons. How can I just put it directly in the background of the jumbotrons size and have it stretch to fit in it properly?
Here is my code:
function displayNextQuestion() {
initialTimer = 21;
console.log(questionBank[triviaQuestions[counter]].question);
console.log(questionBank[triviaQuestions[counter]].correctAnswer);
var questionToDisplay = $('<h2>').addClass('question').text(questionBank[triviaQuestions[counter]].question);
var answerButtons = $('<div>').addClass('answers');
var numberOfAnswers = questionBank[triviaQuestions[counter]].answers.length;
for (var i = 0; i < numberOfAnswers; i++) {
var newButton = $('<button>').addClass('answer btn btn-lrg btn-default btn-block').text(questionBank[triviaQuestions[counter]].answers[i])
.data('index', i).on("click", checkAnswer);
answerButtons.append(newButton);
}
$(".jumbotron").empty().append('<img src =' + questionBank[triviaQuestions[counter]].imageUrl + '>');
$('#question').empty().append(questionToDisplay, answerButtons);
// console.log(questionBank[triviaQuestions[counter]].imageUrl);
run();
}
If you can use it as a background-image instead, use background-position in combination with background-size: cover;. How you use background-position depends on the stuff in the image and what parts you want to be sure to display.
body {
background: url('http://eskipaper.com/images/large-2.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
margin: 0;
}
If you're using an image, you can use the object-fit property, but it isn't well supported - http://caniuse.com/#feat=object-fit
body {
margin: 0;
}
img {
object-fit: cover;
height: 100vh;
width: 100%;
display: block;
}
<img src="http://eskipaper.com/images/large-2.jpg">
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TriviaGame</title>
<!-- We link our html to the Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>STAR WARS TRIVIA</h1>
<div class="container">
<div class="jumbotron">
<div class="row">
<p id="timer"></p>
</div>
<div id="question">
</div>
<button class="btn btn-default btn-block" id="start-btn">START</button>
<button class="btn btn-default btn-block" id="reset-btn">RESET</button>
</div>
</div>
<script src="assets/javascript/game.js"></script>
</body>
</html>
#font-face {
font-family: distant-galaxy;
src: url("Distant-Galaxy/DISTGRG_.ttf");
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: distant-galaxy;
}
h1 {
color: blue;
text-align: center;
font-size: 100px;
text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 0px 0 black, 0px -1px 0 black, -1px 0px 0 black, 4px 4px 3px #000;
opacity: 0.5;
}
.col-md-12 {
text-align: center;
margin: 2%;
}
.col-md-11 {
text-align: left;
margin: 2%;
}
.jumbotron {
padding-top: 5%;
padding-bottom: 15%;
margin-right: 15%;
margin-left: 15%;
opacity: 0.6;
}
.container {
color: grey;
opacity: 0.5;
}
#timer {
font-size: 30px;
text-align: center;
color: black;
}
#question {
color: red;
text-align: center;
font-size: 30px;
}
#start-btn {
text-align: center;
font-size: 50px;
}
#reset-btn {
text-align: center;
font-size: 50px;
}
.btn-block {
text-align: left;
color: blue;
}
As shown in the screenshot, there are contents inside a div element which has a background image. This div container is set to have height: 40% of its parent, I believe it is <ion-content> in this case. Now, the image and the text underneath are cropped. I want to make them fit inside the div container. The background image is also not centered in the div.
How can I style it such that all the contents can be displayed?
How can I center my background image both vertically and horizontally?
It somehow works if I make the browser viewport narrower as shown below. However, I would like to have everything displayed and the background image centered both vertically and horizontally regardless the width of the viewport.
HTML
<div style="height: 40%; overflow: hidden;">
<div class="user-profile">
<div class="user-profile-background"></div>
<div class="user-profile-content">
<div class="row" style="height: 100%;">
<div class="col col-center">
<div class="row">
<div class="col col-33 col-offset-33">
<div style="height: 0; border-radius: 50%; background-image: url('img/ionic.png'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 100%;">
</div>
</div>
</div>
<div class="row">
<div class="col" style="text-align: center; color: rgba(200, 200, 200, 1);">
<h3 style="color: white;">Seraph Cheng</h3>
<p><strong>Male, 28</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.user-profile {
position: relative;
width: 100%;
height: 100%;
}
.user-profile .user-profile-background {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-image: url('../img/basketball.jpg');
background-size: cover;
}
.user-profile .user-profile-content {
position: relative;
z-index: 2;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
Edit
Added a CodePen link to illustrate my problem.
The problem is the background-size: cover css rule. You can test the difference between cover and contain here:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
It's fully compatibility with latest browsers: http://caniuse.com/background-img-opts
Try this:
.user-profile .user-profile-background {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-image: url('../img/basketball.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
You can set an explicit height for the background image for example height = 350px and set center center as the position property where you have specified the background image. This way the height will remain fixed but as the view port is reduced, the background image will start cropping from left and right sides i.e it would remain in the center.
Then on smaller view port, you can reduce the height to say 250px.
HTML
<div class="root">
<div class="subroot">
<div class="container">
<div class="square bg"></div>
</div>
<div class="passage">
<p>Hello world!</p>
</div>
</div>
</div>
CSS
.root {
width: 70%;
margin: auto;
border: 2px solid yellow;
background-image: url('http://baconmockup.com/600/400');
background-size: cover;
background-position: center;
}
.subroot {
background-color: rgba(0, 0, 0, 0.7);
}
.container {
border: 2px solid black;
width: 100px;
margin: auto;
}
.square {
border: 2px dotted red;
padding-bottom: 100%;
}
.bg {
background-image: url('http://placehold.it/200x300');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
}
.passage {
border: 2px dotted green;
width: 80%;
margin: auto;
text-align: center;
white-space: nowrap;
overflow: scroll;
color: white;
}
Problem solved.